Simple Content Slider using jQuery
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
CSS
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.
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
-
[*][url=0]
[*][url=1][/url]
[*][url=2][/url]
[*][url=3][/url]
[*][/url]
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.
Replies
-
PraveenKumar PurushothamanJavaScript
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! 😀 -
Ankita KatdareI am sure people will find it helpful. Can you share the screenshots of what the content slider looks like?
-
PraveenKumar Purushothaman
Why just a screenshot? They can see the live demo here: Edit fiddle - JSFiddle - Code PlaygroundAbraKaDabraI am sure people will find it helpful. Can you share the screenshots of what the content slider looks like? -
Anoop Kumarbeautiful 👍
-
Manish Goyalpraveen 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? -
PraveenKumar Purushothaman
You can do it using CSS3 Transitions na? Or, okay, lemme write a script and post it?goyal420praveen 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? -
PraveenKumar Purushothaman#-Link-Snipped-#, Please check out the thread: #-Link-Snipped-# for what you have asked! 😀
You are reading an archived discussion.
Related Posts
Hello everyone, my name is Decio, I´m from Argentina. I am studying Telecommunications Engineer, I´m doing the last subjects. Well I was googling and I found your forum, I hope...
i wanted to create some spy-bot which can fly with the rc plane modules and also walk on land. i want to introduce a pin-out system to attach and eject...
Name: Mohd Farkhan Bin Yahya
Location: Johor bahru, Johor Malaysia
*Occupation:Student In Robotics Automation sector (Recent)
Work Experience: Automation Engineer, head Specialist Engineer
*Hobbies & Interests: Product design and development...
Facebook is not just a social networking site anymore; it provides a detailed insight on a person’s life and the events that are of importance to him/her. Facebook has now...
Dear All,
Will you please tell me whether tubelight get switched ON if it is started with reduced voltage (say 200V)? What are the effects(advantages OR disadvantages) of doing so?...