CSS only Responsive Image Slider

In this tutorial, you’ll learn how to create a responsive image slider using CSS only. How it would be? an image slider that can be slide through HTML radio inputs with a smooth sliding animation. The final output is shown in the above image. Besides this, you can also check the demo page for its live version.

In modern web design, an image slider can be used for multiple purposes. Whether you can use it to display your top-rated products, portfolio contents or to describe features of your business. Anyhow, it’s your choice whatever you want to show in your image slider.

So, without going into depth let’s start the process of creating an image slider.

HTML for Responsive Image Slider

In HTML, first of all, we’ll create a section with id “slider” and then place all child elements in it. So, build the markup structure just like below:

<section id="slider">
    <input type="radio" name="slider" id="slide1" checked />
    <input type="radio" name="slider" id="slide2" />
    <input type="radio" name="slider" id="slide3" />
    <input type="radio" name="slider" id="slide4" />
    <input type="radio" name="slider" id="slide5" />
    <div id="slides">
        <div id="overflow">
            <div class="inner">
                <article>
                    <img src="img/image-1.jpg" />
                </article>
                <article>
                    <img src="img/image-2.jpg" />
                </article>
                <article>
                    <img src="img/image-3.jpg" />
                </article>
                <article> 
                    <img src="img/image-4.jpg" />
                </article>
                <article>
                    <img src="img/image-5.jpg" />
                </article>
            </div>
        </div>
    </div>
    
    <div id="active">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
        <label for="slide5"></label>
    </div>
</section>

In the above HTML, the point to consider is that create radio input according to the number of slider images. Similarly, create label elements at the end and wrap them all into a div tag with “active” id.

The CSS Styles

After completing the HTML structure, now its time to style the image slider. So, the first thing to style is “#slider” the main container of sliding items.

#slider {
    display: inline-block;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    -webkit-transform: translateZ(0);
    transition: all 0.5s ease-out;
}

Now we’ll define styles for inner of the slider and make its images responsive using CSS width property.

#overflow {
    width: 100%;
    overflow: hidden;
}
#slider img {
    width: 100%;
    height: auto;
}
#slides .inner {
    width: 500%;
    line-height: 0;
}
#slides article {
    width: 20%;
    float: left;
}

On the demo page, you have slid the slider images by clicking the dots. The following CSS code blocks define the design of those dots. If you want to customize these dots controls, you can pass the custom values for width, height, border-color (that is #777), etc.

#controls {
    margin: -25% 0 0 0;
    width: 100%;
    height: 50px;
}
#controls label {
    display: none;
    width: 50px;
    height: 50px;
    opacity: 0.3;
}
#active {
    margin: 10px 0 0;
    text-align: center;
}
#active label {
    border-radius: 5px;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #bbb;
    -webkit-transform: translateZ(0);
    transition: opacity 0.2s ease-out;
}
#active label:hover {
    background: #ccc;
    border-color: #777 !important;
}
#controls label:hover {
    opacity: 0.8;
}

Now, define some CSS styles for slides and it’s animation. The #slides selector refers to images of the slider. Basically, it’s the most visible part of the image slider. According to the following CSS code, it has a 15px white border, a 5px radius, and a light-dark shadow effect. If you want to customize,  pass the custom value for border-radius, box-shadowand background etc.

 #slides {
    border-radius: 5px;
    box-shadow: 1px 1px 4px #666;
    padding: 15px;
    background: #fff;
    background: rgb(252, 255, 244);
    background: linear-gradient(top, rgba(252, 255, 244, 1) 0%, rgba(219, 218, 201, 1) 100%);
}
/* Animation */
 #slides .inner {
    transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

Now we’ll define the sliding functionality using CSS: checked pseudo-selector.

#slide1:checked ~ #active label:nth-child(1), 
#slide2:checked ~ #active label:nth-child(2), 
#slide3:checked ~ #active label:nth-child(3), 
#slide4:checked ~ #active label:nth-child(4), 
#slide5:checked ~ #active label:nth-child(5) {
    background: #333;
    border-color: #333 !important;
}
label, #active, img {
    -moz-user-select:none;
    -webkit-user-select:none;
}
input {
    display: none;
}
#slide1:checked ~ #slides .inner {
    margin-left:0;
}
#slide2:checked ~ #slides .inner {
    margin-left:-100%;
}
#slide3:checked ~ #slides .inner {
    margin-left:-200%;
}
#slide4:checked ~ #slides .inner {
    margin-left:-300%;
}
#slide5:checked ~ #slides .inner {
    margin-left:-400%;
}

Finally, add the following CSS into your image slider project to make it responsive.

/* Responsive Styling */
 @media only screen and (max-width: 850px) and (min-width: 450px) {
    #slider #controls {
        margin: -25% 0 0 15%;
        width: 70%;
        height: 50px;
    }
    #slider #controls label {
        transform: scale(0.8);
    }
    #slider #slides {
        padding: 1% 0;
        border-radius: 0px;
    }
    #slider #active {
        margin: 22% 0 0;
    }
}
/* Mobile */
 #mobile:checked ~ #slider #controls {
    margin: -28% 0 0 24%;
    width: 50%;
    height: 50px;
}
#mobile:checked ~ #slider #active {
    margin: 23% 0 0;
}
#mobile:checked ~ #slider #slides .info {
    opacity: 0 !important;
}
#mobile:checked ~ #slider #controls label {
    transform: scale(0.6);
}
@media only screen and (max-width: 450px) {
    #slider #controls {
        margin: -28% 0 0 24%;
        width: 50%;
        height: 50px;
    }
    #slider #active {
        margin: 23% 0 0;
    }
    #slider #slides {
        padding: 1% 0;
        border-radius: 0px;
    }
    #slider #slides .info {
        opacity: 0 !important;
    }
    #slider #controls label {
        transform: scale(0.6);
    }
}
@media only screen and (min-width: 850px) {
    body {
        padding: 0 80px;
    }
}

That’s all! you have done. I hope you find this image slider tutorial helpful. If you have any questions or suggestions related to image slider, feel free to comment below. Thanks!

You May Also Like

Leave a Comment