Комментарии:
thank youuuu sooo muuch it wasss sooo helpfulllllll :))))))
Ответить
Thank you for the Simple code and effective. But the images are not repeated. Is there any modification possible, so images will be infinite?
Ответить
Nice video short and sweet
Ответить
Brillant, thanks for instruction !! <3
Ответить
no me salio :(
Ответить
Thank you helped alot!
Ответить
Please provide source code here
Ответить
it helped me a lot, thanks bro
Ответить
You're the Man!
Ответить
THANK YOU!!!!
Ответить
Hello!
This is simple and easy to understand.
Please share the code because it is not too much of visible actually.
it ends, uts not infinite
Ответить
Legit tut
Ответить
How does the carousel stop on hovering image?
Ответить
Hi! This loops really cool! I want this but from top to bottom. How do I do this?
Ответить
Thanks ! It's a great solution !
Ответить
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="slider">
<div class="slide-track" >
<div class="slide">
<img src='./images/netflix.png' />
</div>
<div class="slide">
<img src='./images/tving.png' />
</div>
<div class="slide">
<img src='./images/disneyplus.png' />
</div>
<div class="slide">
<img src='./images/coupangplay.png' />
</div>
<div class="slide">
<img src='./images/watcha.png '/>
</div>
<div class="slide">
<img src='./images/wavve.png '/>
</div>
<div class="slide">
<img src='./images/boxoffice.png' />
</div>
<!-- doubled -->
<div class="slide">
<img src='./images/netflix.png' />
</div>
<div class="slide">
<img src='./images/tving.png '/>
</div>
<div class="slide">
<img src='./images/disneyplus.png' />
</div>
<div class="slide">
<img src='./images/coupangplay.png' />
</div>
<div class="slide">
<img src='./images/watcha.png' />
</div>
<div class="slide">
<img src='./images/wavve.png' />
</div>
<div class="slide">
<img src='./images/boxoffice.png' />
</div>
</div>
</div>
</body>
</html>
body {
min-height: 100vh;
display: grid;
place-items: center;
}
.slider {
height: 250px;
margin : auto;
position: relative;
width : 90%;
display: grid;
place-items : center;
}
.slide-track {
display: flex;
width : calc(250px * 14);
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-250px * 7));
}
}
.slide {
height: 200px;
width : 250px;
display: flex;
align-items : center;
padding : 15px;
perspective: 100px;
}
img {
width : 100%;
}
img: hover{
transform: translateZ(20px);
}
.slider::before,
.slider::after{
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
content: '' ;
height: 100%;
position: absolute;
width: 15%;
z-index: 2;
}
.slider::before {
left: 0;
top: 0;
}
.slider::after {
right: 0;
top: 0;
transform: rotateZ('180deg');
}
i copied source codes now, but the auto-scorll is not working. is there anyone to help?
This was a huge help, thank you!
Ответить
hey! Nice video.
Ответить
for some reason i can't seem to make it work
Ответить
can we do this for end continue next slider
Ответить
thanks alot, this was exactly what i needed
Ответить
it,s just amazing bro 👍👌
Ответить
what is the code to move from left to right
Ответить
Incisive explanation.
Great video!
Thanks for the video!
Awsome!!! thank you so much ❤❤❤
Ответить
wow, thank you for this video man, I love it, please Is there a source code for the tutorial
Ответить
thank you, it was really helpful.
Ответить
my slide is not infinite :c
Ответить
You are brilliant. Your tutorial helped me so much and I really appreciate your work. Keep up creating great videos like this! 👏👏
Ответить
What happens when last image shows up!???
Ответить
Thank you so much, i was really looking for this and couldn't find any content on the topic seeming like a common feature.
Ответить
Very well done! I would just want to add that you should add the first image on top of the duplicated, because the image might take a bit to load
Ответить
is this loop animation?
Ответить
this worked awesome!
Ответить
its a full static solution :(
Ответить
helpful!
Ответить
Please make it in react native
Ответить
thanks for this! super easy to follow along, keep it up!
Ответить
not infinite 🤷♂
Ответить
Hey The Mute Dev :)
I really like this tutorial and wondered if it is possible to add one specific thing: to turn the pictures into links so u can click them and get to a nother website, but the rest stays the same?
Is it responsive?
Ответить
Your video as helped me a lot to solve what I seek for, thanks for it
Ответить
Apenas CSS! Simples, fácil mas perfeito demais!!! 👏👏👏
Ответить
Thanks !
Ответить
Great Video! thank you 🥰
Ответить
Awesome tutorial
Ответить
Bhai awaz nhi hai kya apke muh me
Ответить
i need source code
Ответить
