Hey guys, today in this post we are going to learn about How to create a custom multiple sliders on same page in jQuery.
Files we used in this post example:-
multipleSlider.html | HTML File | It is used for create a slider for display the browser. |
multipleSliderScript.js | JavaScript File | It is holding JavaScript Functioality |
multipleSliderStyle.css | Style CSS File | It is used for slider alignment of slider image. |
jQuery Library | JQuery Library Min File | It is a JQuey Library that is provided by JQuery |
Final Output
Other post that would you like to learn
Download Supported jQuery Library for Slider Plugin
Step 1:- Create HTML File : multipleSlider.html
multipleSlider.html [HTML File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>w3web.net -- jquery multiple sliders on same page </title> <script type="text/javascript" src="http://w3web.net/wp-includes/js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/multipleSliderScript.js"></script> <link rel="stylesheet" href="css/multipleSliderStyle.css" type="text/css" media="all"> </head> <body> <div id="sliderContainer"> <span><a href="#" class="pre" title="Previous"><abbr style="font-size:60px;">◃</abbr></a></span> <span><a href="#" class="nxt" title="Next"><abbr style="font-size:60px;">▹</abbr></a></span> <div class="over"> <ul class="sliderList"> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider1.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider2.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider3.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider4.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider5.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider6.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider7.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider8.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider9.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider10.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> </ul> </div> </div> <br /> <br /> <div id="sliderContainer1"> <span><a href="#" class="pre" title="Previous"><abbr style="font-size:60px;">◃</abbr></a></span> <span><a href="#" class="nxt" title="Next"><abbr style="font-size:60px;">▹</abbr></a></span> <div class="over"> <ul class="sliderList"> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider6.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider7.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider8.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider9.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider10.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider1.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider2.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider3.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider4.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider5.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> </ul> </div> </div> <br /> <br /> <div id="sliderContainer2"> <span><a href="#" class="pre" title="Previous"><abbr style="font-size:60px;">◃</abbr></a></span> <span><a href="#" class="nxt" title="Next"><abbr style="font-size:60px;">▹</abbr></a></span> <div class="over"> <ul class="sliderList"> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider9.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider10.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider1.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider2.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider3.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider7.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider8.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider4.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider5.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider6.png" width="100" height="90" alt="w3web.net Javascript Slider Plugin"></li> </ul> </div> </div> </body> </html> |
Step 2:- Create JavaScript File : multipleSliderScript.js
multipleSliderScript.js [JavaScript File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
$(document).ready(function(){ $('#sliderContainer').myhrSlider(); $('#sliderContainer1').myhrSlider(); $('#sliderContainer2').myhrSlider(); }) $.fn.myhrSlider = function() { var thisObj = $(this); var ulmain = thisObj.find('ul:first'); var lisize = thisObj.find('li').size(); var liwidth = thisObj.find('li').outerWidth(true); ulmain.width(lisize*liwidth + 'px'); $('.pre').addClass('active'); var preLnk = thisObj.find('.pre'); var nxtLnk = thisObj.find('.nxt'); var animation = true; nxtLnk.click(function(event){ event.preventDefault(); if(lisize<4) { return false; } else { if(!$(this).is('.active')) { if(animation) { animation=false; ulmain.animate({left:'-='+ liwidth + 'px'}, 200, function(){ slideElement(); }) } } } return false; }) preLnk.click(function(event){ event.preventDefault(); if(!$(this).is('.active')) { if(animation) { animation=false; ulmain.animate({left:'+='+ liwidth + 'px'}, 200, function(){ slideElement(); }) } } return false; }) function slideElement() { animation=true; if(ulmain.css('left')==('-' + liwidth*(lisize-4) + 'px')) { preLnk.removeClass('active'); nxtLnk.hide(); } else if(ulmain.css('left')=='0px') { nxtLnk.removeClass('active'); preLnk.hide(); } else { preLnk.show(); nxtLnk.show(); } } } |
Step 3:- Create Style CSS : multipleSliderStyle.css
multipleSliderStyle.css [Style CSS File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
#sliderContainer{ position:relative; width:473px; margin:auto; border:1px #ccc solid;} #sliderContainer .over{ overflow:hidden; padding:5px;} #sliderContainer .pre{ position:absolute; left:-30px; top:15%;} #sliderContainer .pre{ color:#000000; text-decoration:none;} #sliderContainer .pre:hover, .pre.active{ color:#FF0000; text-decoration:none;} #sliderContainer .nxt{ position:absolute; right:-30px; top:15%;} #sliderContainer .nxt{ color:#000000; text-decoration:none;} #sliderContainer .nxt:hover, .nxt.active{ color:#FF0000; text-decoration:none;} #sliderContainer ul.sliderList{ margin:0; padding:0; list-style:none; position:relative; } #sliderContainer ul.sliderList li{ width:100px; height:90px; padding:3px; border:1px #ff0000 solid; float:left; margin-right:10px;} #sliderContainer1{ position:relative; width:473px; margin:auto; border:1px #ccc solid;} #sliderContainer1 .over{ overflow:hidden; padding:5px;} #sliderContainer1 .pre{ position:absolute; left:-30px; top:15%;} #sliderContainer1 .pre{ color:#000000; text-decoration:none;} #sliderContainer1 .pre:hover, .pre.active{ color:#FF0000; text-decoration:none;} #sliderContainer1 .nxt{ position:absolute; right:-30px; top:15%;} #sliderContainer1 .nxt{ color:#000000; text-decoration:none;} #sliderContainer1 .nxt:hover, .nxt.active{ color:#FF0000; text-decoration:none;} #sliderContainer1 ul.sliderList{ margin:0; padding:0; list-style:none; position:relative; } #sliderContainer1 ul.sliderList li{ width:100px; height:90px; padding:3px; border:1px #287d04 solid; float:left; margin-right:10px;} #sliderContainer2{ position:relative; width:473px; margin:auto; border:1px #ccc solid;} #sliderContainer2 .over{ overflow:hidden; padding:5px;} #sliderContainer2 .pre{ position:absolute; left:-30px; top:15%;} #sliderContainer2 .pre{ color:#000000; text-decoration:none;} #sliderContainer2 .pre:hover, .pre.active{ color:#FF0000; text-decoration:none;} #sliderContainer2 .nxt{ position:absolute; right:-30px; top:15%;} #sliderContainer2 .nxt{ color:#000000; text-decoration:none;} #sliderContainer2 .nxt:hover, .nxt.active{ color:#FF0000; text-decoration:none;} #sliderContainer2 ul.sliderList{ margin:0; padding:0; list-style:none; position:relative; } #sliderContainer2 ul.sliderList li{ width:100px; height:90px; padding:3px; border:1px #670323 solid; float:left; margin-right:10px;} |
Mostly, your ability is great in wonderful informertion
very nice for informertion
That’s an interesting post. Check out below link for more interesting posts:
Pics Directory
good post
very informative
In this blog I get a great post sir please also visit my blog I post great content
Youβre a beautiful inspiration. It really helps me in any situation. Where I stuck. Many of my friends told me to comment there post but I stuck what I should comment. Finally I got your post it always help me. Thanks for the lovely post.
your post is amazing and I really loved reading your post.
Great Thanks for sharing awesome info. It was very well authored and easy to understand.
Nice Blog