JQuery multiple sliders on same page

[vijayk3327]

In this post we are going to learn about How to create a custom multiple sliders on same page in jQuery.

👉 Get source code live demo link:-

**Step 1:- Create HTML File : multipleSlider.html

multipleSlider.html [HTML File]**

`

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

◃ ▹

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

◃ ▹

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

◃ ▹

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

        <br/><br/>
        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
        <div style="display:block; overflow:hidden;"> 
            <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
                    <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
                    <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
                    <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
                </ul>
        </div>

        <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
                    <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
                    <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
                    <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
                </ul>
            </div>
           <div style="clear:both;"></div> 
           <br/>
            <div class="youtubeIcon">
                <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
            </div>
</div>

`

**Step 2:- Create JavaScript File : multipleSliderScript.js

multipleSliderScript.js [JavaScript File]**

`$(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]**

`#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;}`

👉 Get source code live demo link:-