javascript - css carousel chart adapts to layout problem-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

javascript - css carousel chart adapts to layout problem

给我你的怀抱 2017-06-13 09:23:41

985

Similar to the carousel layout, the outer blue container does not set the width and is 100% adaptive. The width of each sub-container is equal to the width of the parent container and is displayed in one row. The part beyond the parent element is hidden. Can this be achieved using js?

给我你的怀抱

reply all (3)

学习ing2017-06-13 09:25:41 3 floor

Similar effects can be achieved simply by relying on CSS:

HTML：

CSS： .p1{ animation: pleft 6s infinite linear; -webkit-animation: pleft 6s infinite linear; animation-fill-mode: both; -webkit-animation-fill-mode: both; } @keyframes pleft{ 0%{left: 200%} 100%{left: -100%} } .p2{ animation: pmid 6s infinite linear; -webkit-animation: pmid 6s infinite linear; animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-delay:2s; -webkit-animation-delay:2s; } @keyframes pmid{ 0%{left: 200%} 100%{left: -100%} } .p3{ animation: pright 6s infinite linear; -webkit-animation: pright 6s infinite linear; animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-delay:4s; -webkit-animation-delay:4s; } @keyframes pright{ 0%{left: 200%} 100%{left: -100%} }

jsfiddle.net to see if it’s what you want

Like+0

Add Reply

学习ing2017-06-13 09:25:41 2 floor

I thought of two methods: flex and inline-block
The width of the container is set for easier observation.
Logically speaking, it is also possible to use positioning. But you have to set the positioning one by one, so I didn’t do it.

https://jsfiddle.net/m41tLwqb/1/
https://jsfiddle.net/2zcqqj26/

Like+0

Add Reply