JQuery responsive content slider

In this article we'll be looking at creating a responsive content slider using basic HTML, CSS and JQuery. This is a great way to provide some nice visual transitions for your visitors while maintaining accessability on different platforms.

We'll start by building up the HTML that will sit inside your page's body tag; create a 'slider' container with an unordered list with items that will each represent a slide. The bottom two divisions are for the navigation controls:

<div class="slider">
    <ul class="items">
        <li>
            <p>
                <img src="image.jpg" />
                ALorem ipsum dolor sit amet, consectetur adipiscing elit.
                Morbi eget ultrices nunc. Quisque ultrices, orci sed
                pretium varius, tellus quam sollicitudin augue.
            </p>
        </li>
        <li>
            <p>
                <img src="image.jpg" />
                ALorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Morbi eget ultrices nunc. Quisque ultrices, orci sed 
                pretium varius, tellus quam sollicitudin augue.
            </p>
        </li>
        <li>
            <p>
                <img src="image.jpg" />
                ALorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Morbi eget ultrices nunc. Quisque ultrices, orci sed 
                pretium varius, tellus quam sollicitudin augue.
            </p>
        </li>
        <li>
            <p>
                <img src="image.jpg" />
                ALorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Morbi eget ultrices nunc. Quisque ultrices, orci sed 
                pretium varius, tellus quam sollicitudin augue.
            </p>
        </li>
        <li>
            <p>
                <img src="image.jpg" />
                ALorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Morbi eget ultrices nunc. Quisque ultrices, orci sed 
                pretium varius, tellus quam sollicitudin augue.
            </p>
        </li>
    </ul>

    <div class="next navigation">Next</div>
    <div class="prev navigation">Previous</div>

</div>

Next we'll add a little styling:

.slider
{
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border:2px solid #888;
    height:300px;
    max-width:800px;
    min-width:320px;
    font-family: sans-serif;
}

.slider .items
{
    padding:0;
    margin:0;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

.slider .items li
{
    height:250px;
    float:left;
    text-align:left;
    position:relative;
    list-style-type: none;
}


.slider .navigation
{
    position:absolute;
    bottom:10px;
    background-color:#000;
    color:#fff;
    padding:3px 5px;
}

.slider .next
{
    right:1%;
}

.slider .prev
{
    left:1%;
}

.slider p
{
    padding:0px 15px;
}

.slider img
{
    width:100%;
}

Most of the above is easily customisable to fit your needs. The most important property to note from the above is the hidden overflow on the slider class which creates a 'window' for you to see the active slides and mask the rest.

Lastly we'll add some JQuery to bring it all together, the code is commented to explain the steps:

$(document).ready(function()
{
// Set how many items you would like to show
var showItems = 3;

// Calculate what percentage each item represents of view
var totalItems = $(".items > li").length;
var itemWidth = 100 / totalItems;
$('.items li').css('width', itemWidth + '%');

// Calculate the percentage length of the whole slider
var itemPercentage = 100 / showItems;
var itemsPercentage = itemPercentage * totalItems;
$('.items').css('width', itemsPercentage + '%');

// Bind the next and previous click functions
$('.next').on('click', function(){
    if((Math.floor($('.items').width() + $('.items').position().left) != $('.items li:first').width()) && !$('.items').is(':animated')){
    $('.items').animate({left : "-=" + itemPercentage + "%"});
    }
    return false;
});

$('.prev').on('click', function(){
    if(Math.floor(($('.items').position().left)) !=0 && !$('.items').is(':animated')){
        $('.items').animate({left : "+=" + itemPercentage + "%"});
    }
    return false;
    });
});

 

Don't forget to include the latest version of jQuery!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Live Demo

Take a look at the working demo.

Sign Up
comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.