admin 管理员组文章数量: 1086019
I have a very simple slider with jquery; it supports only one slider, and I want to make it support multiple sliders on the same page.
Example: Slider 1, Slider 2, Slider 3 etc. on the same page.
A working snippet is here working example.
I know I have to use each function—and I did—but it stopped working. I don't know where I am going wrong. This is what I tried; the code was too long, so I shortened it:
$('#slider').each(function() {
var current_slider = $(this);
//slider codes in here
});
Here is my plete code:
$(function(){
var Slider = 0;
$.Slider = function(total){
$("#indicator li").removeClass("active");
$("#image li").hide();
if (Slider < total -1){
Slider++;
$("#indicator li:eq("+Slider+")").addClass("active");
$("#image li:eq("+Slider+")").fadeIn("slow");
}else {
$("#indicator li:first").addClass("active");
$("#image li:first").fadeIn("slow");
Slider = 0;
}
}
var totalLi = $("#indicator li").length;
var interval = setInterval('$.Slider('+totalLi+')',5000);
$("#slider").hover(function(){
clearInterval(interval);
},function(){
interval = setInterval('$.Slider('+totalLi+')',5000);
});
$("#indicator li:first").addClass("active");
$("#image li").hide();
$("#image li:first").show();
$("#indicator li").hover(function(){
var indicators = $(this).index();
$("#indicator li").removeClass("active");
$(this).addClass("active");
$("#image li").hide();
$("#image li:eq("+indicators+")").fadeIn("slow");
Slider = indicators;
return true;
});
});
I don't want to repeat the same code for each slider.
I want it to support multiple sliders like this example; that example uses each function to get all the sliders, but it doesn't have mouseenter and mouseleave and indicators in it.
I have a very simple slider with jquery; it supports only one slider, and I want to make it support multiple sliders on the same page.
Example: Slider 1, Slider 2, Slider 3 etc. on the same page.
A working snippet is here working example.
I know I have to use each function—and I did—but it stopped working. I don't know where I am going wrong. This is what I tried; the code was too long, so I shortened it:
$('#slider').each(function() {
var current_slider = $(this);
//slider codes in here
});
Here is my plete code:
$(function(){
var Slider = 0;
$.Slider = function(total){
$("#indicator li").removeClass("active");
$("#image li").hide();
if (Slider < total -1){
Slider++;
$("#indicator li:eq("+Slider+")").addClass("active");
$("#image li:eq("+Slider+")").fadeIn("slow");
}else {
$("#indicator li:first").addClass("active");
$("#image li:first").fadeIn("slow");
Slider = 0;
}
}
var totalLi = $("#indicator li").length;
var interval = setInterval('$.Slider('+totalLi+')',5000);
$("#slider").hover(function(){
clearInterval(interval);
},function(){
interval = setInterval('$.Slider('+totalLi+')',5000);
});
$("#indicator li:first").addClass("active");
$("#image li").hide();
$("#image li:first").show();
$("#indicator li").hover(function(){
var indicators = $(this).index();
$("#indicator li").removeClass("active");
$(this).addClass("active");
$("#image li").hide();
$("#image li:eq("+indicators+")").fadeIn("slow");
Slider = indicators;
return true;
});
});
I don't want to repeat the same code for each slider.
I want it to support multiple sliders like this example; that example uses each function to get all the sliders, but it doesn't have mouseenter and mouseleave and indicators in it.
- What do you mean by "I want to turn it to support multiple sliders" ? It would be useful if you could do a snippet to showcase what its not working and clarify what you want to acplish that que current code isn't. – Gass Commented Oct 14, 2021 at 8:51
- 1 @Gass added more info and demo link in question – user1805543 Commented Oct 14, 2021 at 20:53
- 1 id attribute must be unique within a HTML document. Currently, you have two slider with same id. Once you have two separate slider with different id, you should be able to make it work. – Sajan Commented Oct 16, 2021 at 5:21
3 Answers
Reset to default 8 +50Simply use .closest() and .find() method to traverse through the current element which is hover . Then , you can use each loop to iterate through slider and get the index of current active li and depending on the position make next li active .
Demo Code :
$(function() {
$.Slider = function(total) {
//loop through all slider
$(".slider-holder").each(function() {
var index = $(this).find(".carousel-indicators .active").index() + 1; //get index of active ..class + 1
$(this).find(".carousel-indicators li").removeClass("active");
$(this).find(".image-slide li").hide();
if (index < total) {
$(this).find(".carousel-indicators li:eq(" + index + ") ").addClass("active");
$(this).find(".image-slide li:eq(" + index + ")").fadeIn("slow");
} else {
$(this).find(".carousel-indicators li:eq(0)").addClass("active");
$(this).find(".image-slide li:eq(0)").fadeIn("slow");
}
})
}
var totalLi = $(".slider-holder:eq(0) .carousel-indicators li").length;
var interval = setInterval('$.Slider(' + totalLi + ')', 5000);
$(".slider-holder").hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval('$.Slider(' + totalLi + ')', 5000);
});
$(".carousel-indicators li").hover(function() {
var indicators = $(this).index();
var selector = $(this); //current li hover...
selector.closest(".carousel-indicators").find("li").removeClass("active"); // to add clas..
selector.addClass("active");
selector.closest(".slider-holder").find(" .image-slide > li").hide();
selector.closest(".slider-holder").find(".image-slide > li:eq(" + indicators + ")").fadeIn("slow");
return true;
});
});body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
.slider-holder {
width: 50%;
height: 300px;
float: left;
position: relative;
margin: 0 auto;
overflow: hidden;
border-radius: 5px;
background-color: #000;
}
.slider-holder ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
.slider-holder .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
.carousel-prev {
position: absolute;
top: 50%;
left: 30px;
margin-top: -15px;
z-index: 10;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.carousel-next {
position: absolute;
top: 50%;
right: 30px;
margin-top: -15px;
z-index: 10;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.carousel-indicators {
position: absolute;
right: 0;
top: 0;
left: 0;
z-index: 2;
display: flex;
justify-content: flex-start;
padding: 0;
margin-right: 1%;
margin-bottom: 10px;
margin-left: 1%;
list-style: none;
}
.carousel-indicators li {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 30px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 30px;
text-indent: 0;
cursor: pointer;
background-color: rgba(15, 15, 20, 0.7);
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: 0.9;
transition: opacity 0.6s ease;
}
.carousel-indicators li:hover,
.carousel-indicators li.active {
background-color: red;
}<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="slider-holder" id="slider">
<ul class="image-slide" id="image">
<li>
<div class="img-fluid" style="background-image:url(https://cdn.pixabay./photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
</ul>
<ul class="carousel-indicators" id="buton">
<li class="active"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>
<h1> Second slider </h1>
<div class="slider-holder" style="width: 40%;float:right;">
<ul class="image-slide">
<li>
<div class="img-fluid" style="background-image:url(https://cdn.pixabay./photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
</ul>
<ul class="carousel-indicators">
<li class="active"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div> <html>
<head>
<title>Your slider in a simple web page</title>
<style>
body { background-color: #fff; color: #000; padding: 0; margin: 0; }
.container { width: 900px; margin: auto; padding-top: 1em; }
.container .ism-slider { margin-left: auto; margin-right: auto; }
</style>
<link rel="stylesheet" href="ism/css/my-slider.css"/>
<script src="ism/js/ism-2.2.min.js"></script>
</head>
<body>
<div class='container'>
<div class="ism-slider" id="my-slider">
<ol>
<li>
<img src="ism/image/slides/flower-729514_1280.jpg">
<div class="ism-caption ism-caption-0">My slide caption text</div>
</li>
<li>
<img src="ism/image/slides/beautiful-701678_1280.jpg">
<div class="ism-caption ism-caption-0">My slide caption text</div>
</li>
<li>
<img src="ism/image/slides/summer-192179_1280.jpg">
<div class="ism-caption ism-caption-0">My slide caption text</div>
</li>
</ol>
</div>
<p class="ism-badge" id="my-slider-ism-badge"><a class="ism-link"
href="http://imageslidermaker." rel="nofollow">generated with ISM</a></p>
<section><h1>Your slider in a simple web page</h1>
<p>This is a working example of your slider.</p>
<p>To get your slider working in your web page add <em>my-slider.css</em>,
<em>ism-2.2.min.js</em> and the slide images to your project directory and paste
the markup into your HTML.</p>
<p>Please see README.txt for more detailed instructions.</p>
<p>* If your slider is not displayed correctly, please first make sure you have
fully extracted the contents of the zip file.</p>
</section></div>
</body>
</html>
You can download css / images and javascript from here note : select slow download when you download the files for free download
here is the working demo but it still needs some update I keep working on code may this help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
.slider-holder {
width: 50%;
height: 300px;
float: left;
position: relative;
margin: 0 auto;
overflow: hidden;
border-radius: 5px;
background-color: #000;
}
.slider-holder ul, li {
padding:0;
margin:0;
list-style:none;
}
.slider-holder .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
.carousel-prev {
position: absolute;
top: 50%;
left: 30px;
margin-top: -15px;
z-index: 10;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.carousel-next {
position: absolute;
top: 50%;
right: 30px;
margin-top: -15px;
z-index: 10;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.carousel-indicators {
position: absolute;
right: 0;
top: 0;
left: 0;
z-index: 2;
display: flex;
justify-content: flex-start;
padding: 0;
margin-right: 1%;
margin-bottom: 10px;
margin-left: 1%;
list-style: none;
}
.carousel-indicators li {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 30px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 30px;
text-indent: 0;
cursor: pointer;
background-color: rgba(15, 15, 20, 0.7);
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: 0.9;
transition: opacity 0.6s ease;
}
.carousel-indicators li:hover, .carousel-indicators li.active {
background-color: red;
}
.carousel-indicators1 {
position: absolute;
right: 0;
top: 0;
left: 0;
z-index: 2;
display: flex;
justify-content: flex-start;
padding: 0;
margin-right: 1%;
margin-bottom: 10px;
margin-left: 1%;
list-style: none;
}
.carousel-indicators1 li {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 30px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 30px;
text-indent: 0;
cursor: pointer;
background-color: rgba(15, 15, 20, 0.7);
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: 0.9;
transition: opacity 0.6s ease;
}
.carousel-indicators1 li:hover, .carousel-indicators1 li.active {
background-color: red;
}
</style>
</head>
<body>
<div class="slider-holder" id="slider">
<ul class="image-slide" id="image" >
<li>
<div class="img-fluid" style="background-image:url(https://cdn.pixabay./photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
</ul>
<ul class="carousel-indicators" id="buton">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>
<h1> Second slider </h1>
<div class="slider-holder" id="slider1" style="width: 40%;float:right;">
<ul class="image-slide" id="image1" >
<li>
<div class="img-fluid" style="background-image:url(https://cdn.pixabay./photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay./photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
</ul>
<ul class="carousel-indicators1" id="buton">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>
<script>
$(function(){
var Slider = 0;
$.Slider = function(total){
$(".carousel-indicators li").removeClass("active");
$("#image li").hide();
if (Slider < total -1){
Slider++;
$(".carousel-indicators li:eq("+Slider+")").addClass("active");
$("#image li:eq("+Slider+")").fadeIn("slow");
}else {
$(".carousel-indicators li:first").addClass("active");
$("#image li:first").fadeIn("slow");
Slider = 0;
}
}
var totalLi = $(".carousel-indicators li").length;
var interval = setInterval('$.Slider('+totalLi+')',5000);
$("#slider").hover(function(){
clearInterval(interval);
},function(){
interval = setInterval('$.Slider('+totalLi+')',5000);
});
$(".carousel-indicators li:first").addClass("active");
$("#image li").hide();
$("#image li:first").show();
$(".carousel-indicators li").hover(function(){
var indicators = $(this).index();
$(".carousel-indicators li").removeClass("active");
$(this).addClass("active");
$("#image li").hide();
$("#image li:eq("+indicators+")").fadeIn("slow");
Slider = indicators;
return true;
});
var Slider1 = 0;
$.Slider = function(total1){
$(".carousel-indicators1 li").removeClass("active");
$("#image1 li").hide();
if (Slider1 < total1 -1){
Slider1++;
$(".carousel-indicators1 li:eq("+Slider1+")").addClass("active");
$("#image1 li:eq("+Slider1+")").fadeIn("slow");
}else {
$(".carousel-indicators1 li:first").addClass("active");
$("#image1 li:first").fadeIn("slow");
Slider1 = 0;
}
}
var totalLi = $(".carousel-indicators1 li").length;
var interval = setInterval('$.Slider('+totalLi+')',5000);
$("#slider1").hover(function(){
clearInterval(interval);
},function(){
interval = setInterval('$.Slider('+totalLi+')',5000);
});
$(".carousel-indicators1 li:first").addClass("active");
$("#image1 li").hide();
$("#image1 li:first").show();
$(".carousel-indicators1 li").hover(function(){
var indicators1 = $(this).index();
$(".carousel-indicators1 li").removeClass("active");
$(this).addClass("active");
$("#image1 li").hide();
$("#image1 li:eq("+indicators1+")").fadeIn("slow");
Slider1 = indicators1;
return true;
});
});
</script>
</body>
</html>本文标签： javascriptHow to add multiple slider support to a simple jquery sliderStack Overflow
版权声明：本文标题：javascript - How to add multiple slider support to a simple jquery slider? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744098127a2533279.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论