[ad_1]
\n<\/p>\n
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.<\/p>\n
I started with the HTML Markup, starting with two Starting with this HTML Markup<\/strong>, I moved on to the CSS<\/strong> and positioned<\/em> the layout elements.<\/p>\n I had somewhat a hard time fixing the issues caused by our ancient Internet Explorer 7<\/strong> and slightly modern Internet Explorer 8<\/strong> browsers, so I had to meddle with their proprietary form of hacking<\/em> and fixed them! The final CSS<\/strong> came this way:<\/p>\n And yeah, the width and height of background<\/em> images are fixed and they were Now comes the really interesting part, which took me about an hour! The JavaScript<\/strong> rocks in consuming time like anything! \ud83d\ude42 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<\/strong> always with pagination<\/strong> and not scalable<\/strong> in future kind of a slider.<\/p>\n First of all, I had no idea how these sliders work, but I had a small idea that the I need a counter<\/strong> to hold the current page been requested. So I initialized a counter The next step is to create a function<\/strong>, which animates the whole slider. Yeah, I used jQuery<\/strong> to help me out! So, the function goes this way:<\/p>\n Since I declared The next comes the awesome Then comes the pagination stuff. It adds the current slide using another awesome CSS \/ jQuery Selector<\/em>, Finally the value of Coming to the next function, which is adding the I added a Hope this helps someone! \ud83d\ude42<\/p>\n<\/p><\/div>\nUL<\/code>s. One holds the pagination<\/em> and the other, content for the slides<\/em>.<\/p>\nHTML<\/h3>\n
<ul class=\"content-pagination\">\n <li><a href=\"0\"><\/a><\/li>\n <li><a href=\"1\"><\/a><\/li>\n <li><a href=\"2\"><\/a><\/li>\n <li><a href=\"3\"><\/a><\/li>\n <li><a href=\"4\"><\/a><\/li>\n<\/ul>\n\n<ul class=\"content-slides\">\n <li>\n <img src=\"slides\/background1.png\" alt=\"\" \/>\n <div class=\"desc\">\n <h3>Heading 1<\/h3>\n <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>\n <\/div>\n <\/li>\n <li>\n <img src=\"slides\/background2.png\" alt=\"\" \/>\n <div class=\"desc\">\n <h3>Heading 2<\/h3>\n <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>\n <\/div>\n <\/li>\n <li>\n <img src=\"slides\/background3.png\" alt=\"\" \/>\n <div class=\"desc\">\n <h3>Heading 3<\/h3>\n <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>\n <\/div>\n <\/li>\n <li>\n <img src=\"slides\/background4.png\" alt=\"\" \/>\n <div class=\"desc\">\n <h3>Heading 4<\/h3>\n <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>\n <\/div>\n <\/li>\n <li>\n <img src=\"slides\/background5.png\" alt=\"\" \/>\n <div class=\"desc\">\n <h3>Heading 5<\/h3>\n <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>\n <\/div>\n <\/li>\n<\/ul>\n<\/code><\/pre>\nCSS<\/h3>\n
.slider {padding: 0; height: 150px; position: relative; overflow: hidden; width: 270px;}\n.slider .content-slides {position: absolute; top: 0; left: 0; padding: 0; margin: 0;}\n.slider .content-slides li {width: 270px; height: 150px; position: relative; float: left; list-style: none;}\n.slider .content-slides li img {width: 270px; height: 150px; display: block;}\n.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;}\n.slider .content-slides li .desc * {color: #fff; width: 200px; margin: 5px 10px; line-height: 1.1em;}\n.slider .content-pagination {text-align: right; position: absolute; bottom: 10px; right: 10px; z-index: 5;}\n.slider .content-pagination li {float: none; display: inline; font-size: 0.75em; padding: 0.25em;}\n.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;}\n.slider .content-pagination li.active-marker a,\n.slider .content-pagination li a:hover {background-color: #08c; color: #fff;}\n<\/code><\/pre>\n270px \u00d7 150px<\/code>.<\/p>\nJavaScript<\/h3>\n
UL<\/code> will be having the width of sum of all the LI<\/code>s, which it holds. So, that became the first statement:<\/p>\n$(\".slider .content-slides\").width($(\".slider .content-slides\").children().size() * $(\".slider .content-slides\").width());\n<\/code><\/pre>\nindex<\/code> and assigning it a value 0<\/code>. Many of you people missed this part!!! Add this too!<\/p>\nindex = 0;\n<\/code><\/pre>\nfunction slideStart()\n{\n curPage = ((index) % $(\".slider .content-slides\").children().size()) + 1;\n $(\".slider .content-slides\").animate({\n \"left\": -($(\".slider .content-slides li:nth-child(\" + curPage + \")\").position().left)\n });\n $(\".slider .content-pagination li\").removeClass(\"active-marker\");\n $(\".slider .content-pagination li:nth-child(\" + curPage + \")\").addClass(\"active-marker\");\n index++;\n}\n<\/code><\/pre>\nindex<\/code> 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<\/strong> value of the count<\/em> of index<\/code> divided by the number of children<\/em> inside slider.<\/p>\nanimate()<\/code> function, which jQuery provides. It is used to change the CSS Properties<\/em> 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<\/code> to fit the next LI<\/code> element.<\/p>\n:nth-child()<\/code>, which literally selects the nth child of the container. Once a slide is loaded, the corresponding LI<\/code> will be marked as active by adding a class active<\/code>.<\/p>\nindex<\/code> is incremented by 1 using the traditional way<\/em>!<\/p>\nclick<\/code> 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<\/code> value, clearing the old timer, and restarting the slider function.<\/p>\n$(\".slider .content-pagination li a\").click(function(){\n index = $(this).attr(\"href\");\n clearInterval(islider);\n slideStart();\n islider = setInterval(\"slideStart()\", 2500);\n return false;\n});\n<\/code><\/pre>\nreturn false;<\/code> at the end to prevent the link from following the URL of it, else it would open the URL from its href<\/code> 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()<\/code> and let it run for a fixed interval, say 2.5 seconds<\/em>. Since it needs to be executed after the document is loaded, it is given inside the $(document).ready()<\/code> function.<\/p>\n$(document).ready(function(){\n slideStart();\n islider = setInterval(\"slideStart()\", 2500);\n});\n<\/code><\/pre>\nFinal JavaScript<\/h3>\n
$(\".slider .content-slides\").width($(\".slider .content-slides\").children().size() * $(\".slider .content-slides\").width());\n\n\nfunction slideStart()\n{\n curPage = ((index) % $(\".slider .content-slides\").children().size()) + 1;\n $(\".slider .content-slides\").animate({\n \"left\": -($(\".slider .content-slides li:nth-child(\" + curPage + \")\").position().left)\n });\n $(\".slider .content-pagination li\").removeClass(\"active-marker\");\n $(\".slider .content-pagination li:nth-child(\" + curPage + \")\").addClass(\"active-marker\");\n index++;\n}\n\n\n$(\".slider .content-pagination li a\").click(function(){\n index = $(this).attr(\"href\");\n clearInterval(islider);\n slideStart();\n islider = setInterval(\"slideStart()\", 2500);\n return false;\n});\n\n$(document).ready(function(){\n index = 0;\n islider = setInterval(\"slideStart()\", 2500);\n});\n<\/code><\/pre>\nFull Demo: http:\/\/jsbin.com\/uhowak\/2<\/a><\/h3>\n