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.
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 UL s. 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.
Heading 1
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!.
Heading 2
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!.
Heading 3
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!.
Heading 4
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!.
Heading 5
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!.
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.
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 LI s, 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 classactive.
Finally, the value of the 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);
});
$(".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);
});
Thanks to Praveen Kumar for being our guest writer this week.
We are a leading niche digital & tech recruitment specialist for the North East of England. We Specialise in the acquisition of high-performing technology talent across a variety of IT sectors including Digital & Technology Software Development.
Our ultimate goal is to make a positive impact on every client and candidate we serve - from the initial call and introduction, right up to the final delivery, we want our clients and candidates to feel they have had a beneficial and productive experience.
If you’re looking to start your journey in sourcing talent or find your dream job, you’ll need a passionate, motivated team of experts to guide you. Check out our Jobs page for open vacancies. If interested, contact us or call 0191 620 0123 for a quick chat with our team.
Follow us on our blog, Facebook, LinkedIn, Twitter or Instagram to follow industry news, events, success stories and new blogs releases.
Back to Blog