Tengo un control deslizante muy simple con jquery; solo admite un control deslizante y quiero que admita varios controles deslizantes en la misma página.
Ejemplo: Control deslizante 1, Control deslizante 2, Control deslizante 3, etc. en la misma página.
Un fragmento de trabajo está aquí ejemplo de trabajo .
Sé que tengo que usar cada función, y lo hice, pero dejó de funcionar. No sé dónde me estoy equivocando. Esto es lo que probé; el código era demasiado largo, así que lo acorté:
$('#slider').each(function() { var current_slider = $(this); //slider codes in here });Aquí está mi código completo:
$(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; }); }); No quiero repetir el mismo código para cada control deslizante. Quiero que admita múltiples controles deslizantes como este ejemplo ; ese ejemplo usa cada función para obtener todos los controles deslizantes, pero no tiene mouseenter , mouseleave ni indicadores.
Aquí está la demostración de trabajo, pero aún necesita alguna actualización. Sigo trabajando en el código. Puede que esto te ayude.
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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> <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.com" 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>Puede descargar css/images y javascript desde aquí nota: seleccione descarga lenta cuando descargue los archivos para su descarga gratuita
Simplemente use .closest() y .find() para recorrer el elemento actual que está suspendido. Luego, puede usar each ciclo para iterar a través del control deslizante y obtener el índice del li activo actual y, dependiendo de la posición, hacer que el siguiente li esté activo.
Código de demostración :
$(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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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>