search

Home  >  Q&A  >  body text

javascript - css carousel chart adapts to layout problem

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?

给我你的怀抱给我你的怀抱2769 days ago1100

reply all(3)I'll reply

  • 学习ing

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

    Similar effects can be achieved simply by relying on CSS: 

    HTML：
<body style='margin: 0;'>
    <p style='position: absolute;width: 40%;height: 100%;background-color: blue;overflow: hidden;'>
        <p class="p1" style='position: absolute;width: 100%;height: 80%;background-color: orange;top: 10%;left: 200%;'></p>
        <p class="p2" style='position: absolute;width: 100%;height: 80%;background-color: green;top: 10%;left: 200%;'></p>
        <p class="p3" style='position: absolute;width: 100%;height: 80%;background-color: red;top: 10%;left: 200%;'></p>
    </p>
</body>
    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

    reply
    0
  • 学习ing

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

    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/

    reply
    0
  • 女神的闺蜜爱上我

    女神的闺蜜爱上我2017-06-13 09:25:41

    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

    reply
    0
  • Cancelreply