Coba cara belanja
<div class="slider">
<figure>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/1_ba2b5461-2812-4f6f-b51a-cd386bd2f19f.png?v=1598945251" alt="" width="" height="">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/2_4cf8ecc0-74c7-4a72-aba8-2f10bbff809d.png?v=1598945264" alt="" width="" height="">
</div>
<div style="text-align: left;">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/3_b2a1e8b9-2601-4968-b44f-5e824fa7afc5.png?v=1598945272" alt="" width="" height="">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/4_c06e562d-5618-498d-9a2e-fbdf84527edf.png?v=1598945282" alt="" width="" height="">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/5_2fbe43ea-7145-4c1c-b3af-6d0b72e3eec5.png?v=1598945290" alt="" width="" height="" style="float: none;">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/6.png?v=1598945313" alt="" width="" height="">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/7.png?v=1598945322" alt="" width="" height="">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/8.png?v=1598945328" alt="" width="" height="">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/9.png?v=1598945337" alt="" width="" height="">
</div>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.slider{
overflow: hidden;
height: autopx;
}
.slider figure div{
width: 20%;
float: left;
}
.slider figure img{
width: 100%;
float: left;
}
.slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 30s slidy infinite;
}
@keyframes slidy{
0%{
left: 0%
}
5%{
left: 0%;
}
10%{
left: -100%;
}
15%{
left: -100%;
}
20%{
left: -200%;
}
25%{
left: -200%;
}
30%{
left: -300%;
}
35%{
left: -300%;
}
40%{
left: -400%;
}
45%{
left: -400%;
}
50%{
left: -500%;
}
55%{
left: -500%;
}
60%{
left: -600%;
}
65%{
left: -600%;
}
70%{
left: -700%;
}
75%{
left: -700%;
}
80%{
left: -800%;
}
85%{
left: -800%;
}
90%{
left: -900%
}
left: -1000%
95%{
}
left: 0%
100%}
}</style>
</figure>
</div>
<figure>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/1_ba2b5461-2812-4f6f-b51a-cd386bd2f19f.png?v=1598945251" alt="" width="" height="">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/2_4cf8ecc0-74c7-4a72-aba8-2f10bbff809d.png?v=1598945264" alt="" width="" height="">
</div>
<div style="text-align: left;">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/3_b2a1e8b9-2601-4968-b44f-5e824fa7afc5.png?v=1598945272" alt="" width="" height="">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/4_c06e562d-5618-498d-9a2e-fbdf84527edf.png?v=1598945282" alt="" width="" height="">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/5_2fbe43ea-7145-4c1c-b3af-6d0b72e3eec5.png?v=1598945290" alt="" width="" height="" style="float: none;">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/6.png?v=1598945313" alt="" width="" height="">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/7.png?v=1598945322" alt="" width="" height="">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/8.png?v=1598945328" alt="" width="" height="">
</div>
<div class="slide">
<img src="https://cdn.shopify.com/s/files/1/0291/2757/3538/files/9.png?v=1598945337" alt="" width="" height="">
</div>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.slider{
overflow: hidden;
height: autopx;
}
.slider figure div{
width: 20%;
float: left;
}
.slider figure img{
width: 100%;
float: left;
}
.slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 30s slidy infinite;
}
@keyframes slidy{
0%{
left: 0%
}
5%{
left: 0%;
}
10%{
left: -100%;
}
15%{
left: -100%;
}
20%{
left: -200%;
}
25%{
left: -200%;
}
30%{
left: -300%;
}
35%{
left: -300%;
}
40%{
left: -400%;
}
45%{
left: -400%;
}
50%{
left: -500%;
}
55%{
left: -500%;
}
60%{
left: -600%;
}
65%{
left: -600%;
}
70%{
left: -700%;
}
75%{
left: -700%;
}
80%{
left: -800%;
}
85%{
left: -800%;
}
90%{
left: -900%
}
left: -1000%
95%{
}
left: 0%
100%}
}</style>
</figure>
</div>