Responsive Slider Using HTML & CSS Only
ฝัง
- เผยแพร่เมื่อ 26 ต.ค. 2019
- 🔥 Best Free UI Design Platform Wondershare Mockitt: bit.ly/3AA4GTW
Codepen - codepen.io/anna_blok/pen/eYYRbQY
Color Palette - coolors.co/ffffff-00171f-0034...
***
Ask a question to the front-end developer - frontendhelp.me
***
My social networks:
Instagram - / annblok
Twitter - / annblok_webdev
Awesome work Anna, thanku so much, it has been super useful!
p.d: I noticed the left arrow wasn't working, figured out if you invert the order of the numbers like shown below it works as it's supposed to:)
#slide1:checked ~ #controls label:nth-last-child(1),
#slide2:checked ~ #controls label:nth-last-child(4),
#slide3:checked ~ #controls label:nth-last-child(3),
#slide4:checked ~ #controls label:nth-last-child(2){
background: url(Images/LeftArrow.svg) no-repeat;
float: left;
margin: 0 0 0 -50px;
display: block;
}
thank you so much
Neenga Tamil ah
thank you
I used a modified version of this for my site. If you want to convert it to a slider that automatically cycles between the 4 slides, you need to add some javascript. Include the following in your HTML header:
var autoplayInterval = 10000;
var autoplayTimer = null;
var autoplay = true;
var newIndex = 1;
if (autoplay) {
autoplayTimer = setInterval(function() {
newIndex++;
navigateSlider();
}, autoplayInterval);
}
function resetSlider() {
clearInterval(autoplayTimer);
}
function navigateSlider() {
const slide1 = document.getElementById('slide1');
const slide2 = document.getElementById('slide2');
const slide3 = document.getElementById('slide3');
const slide4 = document.getElementById('slide4');
if (newIndex == 1) {
slide1.checked = true;
} else if (newIndex == 2) {
slide2.checked = true;
} else if (newIndex == 3) {
slide3.checked = true;
} else if (newIndex == 4) {
slide4.checked = true;
newIndex = 0;
}
}
Note that the first variable (autoplayInterval) is the time between slide cycles. By default, I set it to 10 seconds. Also, you may want to add "onclick="resetSlider()"" to your bullet/control labels, so that if someone navigates through the slides, they stop auto cycling (e.g.: ).
Enjoy!
after watching this video i now know.
i need to learn pseudo-(selectors,elements,classes)
this simply deserves a nobel prize for clearing my mind
Your code has literally saved my life! thank youuuu!
if you downloaded big arrows you have to modify the background size:
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(1){
background: url(right.svg) no-repeat;
background-size: 50px;
float:right;
margin:0 -50px 0 0;
display: block;
}
Thank you! I was looking for someone who had the same problem...
thank you my friend it was very helpful
This is what I was looking for! Thanks, great! :D
U've got one subscriber . Great !
The slider in the video is different from the slider in the source code. Theirs no side buttons.
This is the best tutorial about slider.Great job!!
Tnx!
awesome slides. done some editing on them but overall very good thank you :D
IMPRESSIVE! THANK YOU ANNA!
Thank you from a french guy.
Thats amazing 👍🤩
You've got 1 subscriber
❤🎉
wow nice just HTML , CSS you got it
Hi, congratulations on the tutorial, it helped me a lot.
On the 'back' button I set the numbers to nth-last-child (). I made the following change below in the css.
# slide1: checked ~ #controls label: nth-last-child (1),
# slide2: checked ~ #controls label: nth-last-child (4),
# slide3: checked ~ #controls label: nth-last-child (3),
# slide4: checked ~ #controls label: nth-last-child (2)
thanks
Thank you!
Thank You
I spent hours trying to figure out what I had done wrong. Thanks so much!
@@erickchavez4551 Where do I have to edit it? I dont get it
feels like I'm gonna slide to heaven
really interesting to watch even though I had no clue on most of what was happening. Really good results too
Hello, I am not able to get the front and back arrows to appear onto my page. . . I have reviewed the code several times I can not see why I am having this issue. The bullets work
This is Great!! 🤩🤩
if Arrows are not visible then use ( background-size: cover; ) property
Thnxx 🙂
that song is so relax
This is for fixed number of slides. If you have more images to display, then you have to code JavaScript to modify the style sheet
How?
'
The music sounds like a more ambient version of Mice on Venus from Minecraft lol.
Thanks for the tutorial and code.
subbed, very helpful. Thanks
thanks for sharing this!
you are a freaking legend
Thanks for this, help me very much!
left arrow doesn't work properly.
Thanks for nice slider video:)But I cant did it Visual Studio. How can i do in visual studio? It doesnt display regular, it displays as line by line as Slide 1, Slide 2 etc.
Solved my problem. Thanks a lot
Thanks, its awesome
hi annablok, I want to ask, I have followed your images slide tutorial correctly but I have problems here, namely the arrow keys don't work and the image won't shift, I hope you can help me :)
How do I do if I want to add a fifth element to the slider?
А зачем там стрелка назад если она не работает нормально?
Смотрел на codepen
How can i create a second slider from this on same page, if i copy it and change some code, it works but you can't see the arrows for navigation neither bullets, HELP!!!!
Анна, напишите пожалуйста, что за музыка играет в начале видео)
Why is the back arrow not working?
it only works from the third point to the first, and vice versa
please how to implement an automatic photo pass on this system?
when i put it to mobile view all the text overlaps and crams together. it also wont add the second line
Muchas gracias quedo hermoso ¡
в сss если поменять цирфры то будет норм перелистывать назад
#slide1:checked ~ #controls label:nth-last-child(1),
#slide2:checked ~ #controls label:nth-last-child(4),
#slide3:checked ~ #controls label:nth-last-child(3),
#slide4:checked ~ #controls label:nth-last-child(2)
or...
#slide4:checked ~ #controls label:nth-last-child(2),
#slide3:checked ~ #controls label:nth-last-child(3),
#slide2:checked ~ #controls label:nth-last-child(4),
#slide1:checked ~ #controls label:nth-last-child(1)
Great work!
Thx!
Thank you.
Saludos!
Gracias por el aporte hay unos errores en el código que encontré por si otra persona le pasa lo mismo, el primero es en la clase .inner pusiste un line-height: 0; hay que quitarlo porque eso hace que los párrafos que pongas con mas texto se vea uno encima de otro y no se aprecia bien y estas usando en el html una clase slide-content, pero en CSS, no la modificas lo cual se puede eliminar sin problemas en el html .
muchas gracias se que te esforzaste
Damn i just watched the trailer I'll do it when am finish my school.
Это всегда очень круто, когда подобное сделано на чистом CSS. Только вот, жаль, что в реальном проекте 99% вероятности, что никто никогда подобное не применит. Т.к. гораздо удобнее будет slick\owl. Но как концепт - да, это шикарно)
Slick\Owl, который зависим от jquery, наес
@@user-id1mr9ml2l и что?) Чем так плох jQuery? Может, это и не самый производительный инструмент, но в удобстве и количестве библиотек его пока никто не смог обойти.
нууу стрелку назад я сделал рабочей (автор забил болт, что она не пашет) осталось одно НО, у меня стрелки невидимые....
ошибаешься мой друг, вот мне и понадобился слайдер без джава скрипта )
тот самый 1%)
Which technology or libraries used in js bro? Whether it is native js or not?
thanks alot work for me
How change slider position.
I mean top:56% or right:5%
I tried it, but it didn't work
Прямо магия какая то 👏 , тоже так хочу ✨😀✨
hi. its nice work.
What is the name of the music playing in the background?
dimension of pics in slider pls
thank you sir
Awesome 👌💯
Genial!!!
thank a lot
Anna, that was genius - perfect! I'm using it. Except, the back button does not seem to work. Will look at it later. For not it's just perfect! Thanks.
did you every solve the problem of the back slider?
Hello, I posted a comment with the solution I used.
I made the following change below in the css.
# slide1: checked ~ #controls label: nth-last-child (1),
# slide2: checked ~ #controls label: nth-last-child (4),
# slide3: checked ~ #controls label: nth-last-child (3),
# slide4: checked ~ #controls label: nth-last-child (2)
@@andrericardo9660 Yeah!! It's work!
Ваш контент прекрасен, почему у Вас так мало подсчиков остаётся загадкой.
how do i link this to my html code in visual studio?
Спасибо, дорогая
how can I make the same carousel of 7 slides?can anyone help me
how can i made the slider move by it self
back button not working for second slide in this video
Как раз что искал. Спасибо
Thanks !!
How to attach lazy load on this slider
there's something wrong with the left arrow button
Спасибо.
Hi thanks for this it was very helpful! I just have one issue, I copied and pasted the code from codepen but for some reason, my text from h2 and p are overlapping does anyone know how to fix it?
Use line height or give margin
как всегда всё супер
help the icon does not appear for me
How to add more slides???
Thanks Anna
😊
ty so much mam
Can you tell me pixal size in photo ?
thanks :D
this isnt working in responsive the left arrow isnt showing
спасибо
its preatty good but the back button doesnt work
It does but in not a proper way :D
@@user-yd7db3wd7w #slide1:checked ~ #controls label:nth-last-child(1),
#slide2:checked ~ #controls label:nth-last-child(4),
#slide3:checked ~ #controls label:nth-last-child(3),
#slide4:checked ~ #controls label:nth-last-child(2) {
background: url(image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
float:left;
margin: 0 0 0 -50px;
display: block;
}
this is what you should change to make it work right
@@xx8262 thanks! the fix worked perfectly here
Left arrow key does not work properly, if you have time please check it and update as soon as possible
For the left arrow try this:
#slide1:checked ~ #controls label:nth-last-child(4),
#slide2:checked ~ #controls label:nth-last-child(4),
#slide3:checked ~ #controls label:nth-last-child(3),
#slide4:checked ~ #controls label:nth-last-child(2) {
background: url(image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
float:left;
margin: 0 0 0 -50px;
display: block;
}
@@nobodysperfect29 thanks bud !!
nice video !
🤗
Left arrow not working properly
Music intro?
Does anybody know how to put it into autotomatic slider? Like every 4sec it will change to next slide. Thank you very much
Look at my comment. :)
When inputting the svg icon to get the clickable arrow in the css, it will not pop out with anything... I am trying to use an alternative svg icon from another source too but it still won't show... any ideas why that's the case?
use background-size: cover;
the icon size is too large to visible properly
how can I change the color to picture?
la flecha de la izquierda esta dañada
Is it responsive?
un saludo desde elhabal
i am not getting the side buttons < likes >
воу, не думал что такое можно на пюрешном хтмл и цсс сделать
does anyone has any idea how to add new slides to this?
I'm not sure if this would work but try this:
For both the HTML and CSS files as an example where it says 'slide1' till the last slide which in this video would be 'slide4' and slide slide_1 div tags in the HTML and the CSS elements. Just copy and paste the last one which would be eg.
like this and the CSS elements too.
This was something I was just editing
After that, you you rename the one that you just pasted to slide_5 (and you can do more eg 6+ if you want)
Note you have to do it on all the div tags and CSS elements that end with slide4 and slide_4 for it to work from the input tags till the end.
Basically you just copy paste and rename...
I have tried to explain this the simplest way possible.
Sorry if this sounds too complicated.
Hope it possibly helps
Прошу прощения, но текст в тэге текст накладывается друг на друга когда выходит за пределы указанной ширины. Как это можно исправить?
Здраствуй. Нашел решения ?
Can u share the code pls
Thanks for the video, it would be useful to get the back slider working, can you help?
i managed to fix it, just change this part like so:
#slide1:checked ~ #controls label:nth-last-child(1),
#slide2:checked ~ #controls label:nth-last-child(4),
#slide3:checked ~ #controls label:nth-last-child(3),
#slide4:checked ~ #controls label:nth-last-child(2){
background: url(image.flaticon.com/icons/svg/271/271220.svg) no-repeat;
float: left;
margin: 0 0 0 -50px;
display: block;
}
the sequence was wrong
👍
gelek spas mamoste
Як добавити 5й слайд?
how to write symbol next to (#slide1:checked)?
add image in background url