javascript - css carousel chart adapts to layout problem

Question

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

学习ing · Answer

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

学习ing · Answer

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/

女神的闺蜜爱上我 · Answer

I used pure CSS to make a carousel. As for what you mentioned, it should be possible, but I haven’t done it myself, so I can’t be sure

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?