Question

I wanted to create a simple static jQuery based slider. Right now I just have the design. It has small dots as pagination in the right bottom, with a heading, an image and some content. It should be able to loop infinitely and also should have the ability to play and pause. Not much features are required.

Answer 1

Today I tried a content slider, with fixed pagination. I implemented this for something, which I would say after it is released. I could have simply used a plug-in, but due to some technical issues, and I too wanted to learn something, so I did it on my onw.

I started with the HTML Markup, starting with two ULs. One holds the pagination and the other, content for the slides.

Starting with this HTML Markup, I moved on to the CSS and positioned the layout elements.

HTML

<ul class="content-pagination">
    <li><a href="0"></a></li>
    <li><a href="1"></a></li>
    <li><a href="2"></a></li>
    <li><a href="3"></a></li>
    <li><a href="4"></a></li>
</ul>

<ul class="content-slides">
    <li>
        <img src="slides/background1.png" alt="" />
        <div class="desc">
            <h3>Heading 1</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
    <li>
        <img src="slides/background2.png" alt="" />
        <div class="desc">
            <h3>Heading 2</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
    <li>
        <img src="slides/background3.png" alt="" />
        <div class="desc">
            <h3>Heading 3</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
    <li>
        <img src="slides/background4.png" alt="" />
        <div class="desc">
            <h3>Heading 4</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
    <li>
        <img src="slides/background5.png" alt="" />
        <div class="desc">
            <h3>Heading 5</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
</ul>

I had somewhat a hard time fixing the issues caused by our ancient Internet Explorer 7 and slightly modern Internet Explorer 8 browsers, so I had to meddle with their proprietary form of hacking and fixed them! The final CSS came this way:

CSS

.slider {padding: 0; height: 150px; position: relative; overflow: hidden; width: 270px;}
.slider .content-slides {position: absolute; top: 0; left: 0; padding: 0; margin: 0;}
.slider .content-slides li {width: 270px; height: 150px; position: relative; float: left; list-style: none;}
.slider .content-slides li img {width: 270px; height: 150px; display: block;}
.slider .content-slides li .desc {position: absolute; font-size: 90%; background: #999; background: rgba(0, 0, 0, 0.5); left: 0; top: 0; width: 100%; overflow: hidden; padding: 0 0 5px;}
.slider .content-slides li .desc * {color: #fff; width: 200px; margin: 5px 10px; line-height: 1.1em;}
.slider .content-pagination {text-align: right; position: absolute; bottom: 10px; right: 10px; z-index: 5;}
.slider .content-pagination li {float: none; display: inline; font-size: 0.75em; padding: 0.25em;}
.slider .content-pagination li a {width: 7px; height: 7px; border-radius: 7px; background-color: #ccc; overflow: hidden; line-height: 10px; font-size: 1px; text-indent: -999em; display: inline-block; *display: inline; *zoom: 1;}
.slider .content-pagination li.active-marker a,
.slider .content-pagination li a:hover {background-color: #08c; color: #fff;}

And yeah, the width and height of background images are fixed and they were 270px × 150px.

Now comes the really interesting part, which took me about an hour! The JavaScript rocks in consuming time like anything! 🙂 I have to admit that I took a kind of low quality approach in my JavaScript, as I was concerned only about this 5 Content always with pagination and not scalable in future kind of a slider.

JavaScript

First of all, I had no idea how these sliders work, but I had a small idea that the UL will be having the width of sum of all the LIs, which it holds. So, that became the first statement:

$(".slider .content-slides").width($(".slider .content-slides").children().size() * $(".slider .content-slides").width());

I need a counter to hold the current page been requested. So I initialized a counter index and assigning it a value 0. Many of you people missed this part!!! Add this too!

index = 0;

The next step is to create a function, which animates the whole slider. Yeah, I used jQuery to help me out! So, the function goes this way:

function slideStart()
{
    curPage = ((index) % $(".slider .content-slides").children().size()) + 1;
    $(".slider .content-slides").animate({
        "left": -($(".slider .content-slides li:nth-child(" + curPage + ")").position().left)
    });
    $(".slider .content-pagination li").removeClass("active-marker");
    $(".slider .content-pagination li:nth-child(" + curPage + ")").addClass("active-marker");
    index++;
}

Since I declared index as a global variable, I can access it at any time from anywhere. Its scope is valid through the scripts and inside functions. I initialized a variable for the current page as the modulus value of the count of index divided by the number of children inside slider.

The next comes the awesome animate() function, which jQuery provides. It is used to change the CSS Properties as given in a smooth transition instead of a drastic or sudden change. This function now moves (slides) the left position of the list container UL to fit the next LI element.

Then comes the pagination stuff. It adds the current slide using another awesome CSS / jQuery Selector, :nth-child(), which literally selects the nth child of the container. Once a slide is loaded, the corresponding LI will be marked as active by adding a class active.

Finally the value of index is incremented by 1 using the traditional way!

Coming to the next function, which is adding the click event to the pagination buttons. I thought this would be the complicated way, but I managed to do in a simple way by just setting the index value, clearing the old timer, and restarting the slider function.

$(".slider .content-pagination li a").click(function(){
    index = $(this).attr("href");
    clearInterval(islider);
    slideStart();
    islider = setInterval("slideStart()", 2500);
    return false;
});

I added a return false; at the end to prevent the link from following the URL of it, else it would open the URL from its href attribute. Now comes the final part and the important one. The initializer for the script. We just need to start the slider using the function slideStart() and let it run for a fixed interval, say 2.5 seconds. Since it needs to be executed after the document is loaded, it is given inside the $(document).ready() function.

$(document).ready(function(){
    slideStart();
    islider = setInterval("slideStart()", 2500);
});

Final JavaScript

$(".slider .content-slides").width($(".slider .content-slides").children().size() * $(".slider .content-slides").width());


function slideStart()
{
    curPage = ((index) % $(".slider .content-slides").children().size()) + 1;
    $(".slider .content-slides").animate({
        "left": -($(".slider .content-slides li:nth-child(" + curPage + ")").position().left)
    });
    $(".slider .content-pagination li").removeClass("active-marker");
    $(".slider .content-pagination li:nth-child(" + curPage + ")").addClass("active-marker");
    index++;
}


$(".slider .content-pagination li a").click(function(){
    index = $(this).attr("href");
    clearInterval(islider);
    slideStart();
    islider = setInterval("slideStart()", 2500);
    return false;
});

$(document).ready(function(){
    index = 0;
    islider = setInterval("slideStart()", 2500);
});

Full Demo: http://jsbin.com/uhowak/2

Hope this helps someone! 🙂