Responsive Slider Using HTML & CSS Only

***
***
My social networks:

[dabelef]

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;
}

[JoaoPaulo-oxpr]

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

[locorocojack]

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;
}

[andrericardo]

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)

[etherealgem]

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:

<script>
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 =
const slide2 =
const slide3 =
const 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;
}
}
</script>

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.: <label for="slide1"

Enjoy!

[switbeee]

really interesting to watch even though I had no clue on most of what was happening. Really good results too

[hezbonotieno]

The slider in the video is different from the slider in the source code. Theirs no side buttons.

[montserrataguilar]

Your code has literally saved my life! thank youuuu! <3

[Axelniraj]

if Arrows are not visible then use ( background-size: cover; ) property

Thnxx 🙂

[nickspringer]

The music sounds like a more ambient version of Mice on Venus from Minecraft lol.

[AprilSky]

feels like I'm gonna slide to heaven

[ajdinpipo]

This is the best tutorial about slider.Great job!!

[MrFreeedman]

в с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)

[MyGeorge]

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.

[peterkovinski]

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

[yersiniaP]

This is what I was looking for! Thanks, great! :D

[blinklives]

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

[muhammad_zohaib]

Thats amazing 👍🤩
You've got 1 subscriber
❤🎉

[anupkumar]

left arrow doesn't work properly.

[koffiemmanuelngou]

U've got one subscriber . Great !