Simple Content Slider using jQuery

@praveenkumar-66Ze92 • Oct 26, 2024

Oct 26, 2024

1.1K

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 own.

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">
    [*][url=0]</a>
    [*][url=1][/url]
    [*][url=2][/url]
    [*][url=3][/url]
    [*]<a href="4">[/url]
</ul>
 
<ul class="content-slides">
    [*]
        [img]slides/background1.png[/img]
        <div class="desc">
            <h3>Heading 1</h3>
            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!.
        </div>
    
    [*]
        [img]slides/background2.png[/img]
        <div class="desc">
            <h3>Heading 2</h3>
            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!.
        </div>
    
    [*]
        [img]slides/background3.png[/img]
        <div class="desc">
            <h3>Heading 3</h3>
            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!.
        </div>
    
    [*]
        [img]slides/background4.png[/img]
        <div class="desc">
            <h3>Heading 4</h3>
            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!.
        </div>
    
    [*]
        [img]slides/background5.png[/img]
        <div class="desc">
            <h3>Heading 5</h3>
            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!.
        </div>
    
</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;}
.slider .content-slides {position: absolute; top: 0; left: 0;}
.slider .content-slides li {width: 270px; height: 150px; position: relative; float: left;}
.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.

Like 0 Replies 7

Replies

Welcome, guest

Join CrazyEngineers to reply, ask questions, and participate in conversations.

CrazyEngineers powered by Jatra Community Platform

PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Aug 13, 2012
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 1.

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 childreninside 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);
});
```
Hope this helps someone! 😀
0
Ankita Katdare

@abrakadabra • Aug 13, 2012

I am sure people will find it helpful. Can you share the screenshots of what the content slider looks like?
0
PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Aug 14, 2012

AbraKaDabra
I am sure people will find it helpful. Can you share the screenshots of what the content slider looks like?
Why just a screenshot? They can see the live demo here: <a href="https://jsfiddle.net/KeHMx/" target="_blank" rel="nofollow noopener noreferrer">Edit fiddle - JSFiddle - Code Playground</a>

0
Anoop Kumar

@anoop-kumar-GDGRCn • Aug 14, 2012

beautiful 👍
0
Manish Goyal

@manish-r2Hoep • Aug 14, 2012

praveen do you know about some kind of jquery based zoomer with click event

Mean i click on image and it should zoom instead of mouse over or something like that?
0
PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Aug 14, 2012

goyal420
praveen do you know about some kind of jquery based zoomer with click event

Mean i click on image and it should zoom instead of mouse over or something like that?
You can do it using CSS3 Transitions na? Or, okay, lemme write a script and post it?
0
PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Aug 14, 2012

#-Link-Snipped-#, Please check out the thread: #-Link-Snipped-# for what you have asked! 😀

0