Day # 7: Image Slider

For today I have decided to create an image slider by just using HTML and CSS. People, especially beginners, tend to think that in order to add dynamism to a website you need to use Javascript exclusively. The truth is that CSS allows you to add dynamism if you are smart about it. That being said, the key here was to use input[type=”radio”] for each one of the pictures that we want to show. That way we make sure that only one gets displayed, while the others stay in the background. <input type="radio" name="slide" id="img2"> One extra advantage of using that type of inputs is that they allow you to use their labels and style them appropriately. In this case, I decided to style them as small circles that indicate the sequence of the images. Lastly and most importantly, you need to select which image is being shown by setting each input to “checked” and also manage the specific margin so that only one picture can be displayed. #img1:checked ~ .m1 {

    margin-left: 0;

}