javascript - carta karusel css menyesuaikan diri dengan masalah reka letak

Question

Sama seperti reka letak karusel, bekas biru luar tidak mempunyai set lebar dan 100% boleh suai Lebar setiap subbekas adalah sama dengan lebar bekas induk dan dipaparkan dalam satu baris elemen tersembunyi Tanpa menggunakan js Bolehkah ia dicapai dalam keadaan tertentu?

学习ing · Answer

Kesan yang serupa boleh dicapai hanya dengan bergantung pada 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 untuk melihat sama ada itu yang anda mahukan

学习ing · Answer

Saya memikirkan dua kaedah: flex dan inline-block
Lebar bekas ditetapkan untuk memudahkan pemerhatian
Secara logiknya, ia juga boleh digunakan tetapi anda perlu menetapkan kedudukan satu demi satu, jadi saya lakukan jangan buat.

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

女神的闺蜜爱上我 · Answer

Saya pernah menggunakan CSS tulen untuk membuat karusel Mengenai perkara yang anda nyatakan, ia sepatutnya boleh, tetapi saya belum melakukannya sendiri, jadi saya tidak pasti

Serupa dengan susun atur karusel, bekas biru luar tidak menetapkan lebar dan 100% boleh suai Lebar setiap sub-bekas adalah sama dengan lebar bekas induk dan dipaparkan dalam satu baris elemen tersembunyi Tanpa menggunakan js Bolehkah ia direalisasikan dalam keadaan?