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; }
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!
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)
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
@@1001-w5q #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
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.
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)
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 :)
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 .
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.
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!!!!
Это всегда очень круто, когда подобное сделано на чистом CSS. Только вот, жаль, что в реальном проекте 99% вероятности, что никто никогда подобное не применит. Т.к. гораздо удобнее будет slick\owl. Но как концепт - да, это шикарно)
@@ВадимМоскалёв-ж7б и что?) Чем так плох jQuery? Может, это и не самый производительный инструмент, но в удобстве и количестве библиотек его пока никто не смог обойти.
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
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?
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
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?
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
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
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
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!
thanks for this
Your code has literally saved my life! thank youuuu!
The slider in the video is different from the slider in the source code. Theirs no side buttons.
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
This is the best tutorial about slider.Great job!!
Tnx!
really interesting to watch even though I had no clue on most of what was happening. Really good results too
This is what I was looking for! Thanks, great! :D
в с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)
U've got one subscriber . Great !
if Arrows are not visible then use ( background-size: cover; ) property
Thnxx 🙂
Thats amazing 👍🤩
You've got 1 subscriber
❤🎉
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?
'
IMPRESSIVE! THANK YOU ANNA!
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
feels like I'm gonna slide to heaven
awesome slides. done some editing on them but overall very good thank you :D
left arrow doesn't work properly.
Thank you from a french guy.
This is Great!! 🤩🤩
wow nice just HTML , CSS you got it
its preatty good but the back button doesnt work
It does but in not a proper way :D
@@1001-w5q #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
А зачем там стрелка назад если она не работает нормально?
Смотрел на codepen
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!
that song is so relax
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 :)
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
Thanks for this, help me very much!
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.
Thanks for the tutorial and code.
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 !!
please how to implement an automatic photo pass on this system?
How do I do if I want to add a fifth element to the slider?
The music sounds like a more ambient version of Mice on Venus from Minecraft lol.
you are a freaking legend
subbed, very helpful. Thanks
Thanks, its awesome
How change slider position.
I mean top:56% or right:5%
I tried it, but it didn't work
Why is the back arrow not working?
it only works from the third point to the first, and vice versa
Awesome 👌💯
Which technology or libraries used in js bro? Whether it is native js or not?
What song for this Video? So relax
dimension of pics in slider pls
Great work!
Thx!
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!!!!
when i put it to mobile view all the text overlaps and crams together. it also wont add the second line
Анна, напишите пожалуйста, что за музыка играет в начале видео)
Это всегда очень круто, когда подобное сделано на чистом CSS. Только вот, жаль, что в реальном проекте 99% вероятности, что никто никогда подобное не применит. Т.к. гораздо удобнее будет slick\owl. Но как концепт - да, это шикарно)
Slick\Owl, который зависим от jquery, наес
@@ВадимМоскалёв-ж7б и что?) Чем так плох jQuery? Может, это и не самый производительный инструмент, но в удобстве и количестве библиотек его пока никто не смог обойти.
нууу стрелку назад я сделал рабочей (автор забил болт, что она не пашет) осталось одно НО, у меня стрелки невидимые....
ошибаешься мой друг, вот мне и понадобился слайдер без джава скрипта )
тот самый 1%)
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
there's something wrong with the left arrow button
this isnt working in responsive the left arrow isnt showing
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?
thanks for sharing this!
How can I put image in background!?
Прошу прощения, но текст в тэге текст накладывается друг на друга когда выходит за пределы указанной ширины. Как это можно исправить?
Здраствуй. Нашел решения ?
Ваш контент прекрасен, почему у Вас так мало подсчиков остаётся загадкой.
i am not getting the side buttons < likes >
back button not working for second slide in this video
how can i made the slider move by it self
What is the name of the music playing in the background?
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
how do i link this to my html code in visual studio?
How to add more slides???
help the icon does not appear for me
Left arrow not working properly
hi. its nice work.
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
how can I make the same carousel of 7 slides?can anyone help me
How to attach lazy load on this slider
Hi guys, I find it pretty difficult to add a new slide, could you please help me?
What problems?
@@AnnaBlok could you plase make an update with 8slides? I am trying to add new slides and I cant figure out how
@@gogutans @anna blok
I have to make a slide without JS for my site but need more than 4 slides, please help
Same problem, if you have solution may you please write
Were you able to solve this problem?
Левая стрелка не работает. Что-то там не то.
Can you tell me pixal size in photo ?
Muchas gracias quedo hermoso ¡
nice video !
🤗
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. :)
excelente ... Hay manera de que sea automático?
tal vez si conectas una animación, pero no será un método flexible
thanks alot work for me
Як добавити 5й слайд?
Music intro?
how to write symbol next to (#slide1:checked)?
add image in background url
Is it responsive?
Can u share the code pls
Hello Sir, Can I use this in my site??🙏🏻
Yes
will this code work in visual studio code @Anna Blok
yeah
thank you sir
Genial!!!
воу, не думал что такое можно на пюрешном хтмл и цсс сделать
Прямо магия какая то 👏 , тоже так хочу ✨😀✨
la flecha de la izquierda esta dañada
Thank you.
Это браузер такой или программа ?
Сайт Codepen
@@AnnaBlok благодарю ♥️😓
Как раз что искал. Спасибо
gracias mañana lo hago
как всегда всё супер
thank a lot
Thanks !!
Thanks Anna
😊
Спасибо, дорогая