There is a gallery in it on one page, let's say 8 pieces of images, by clicking on the image a modal window appears and there are a number of images organized with the help of a carousel. What is the problem, when there is one carousel in the code on the page, everything works fine, but if such a carousel is used in another place on the same page, then everything stops working. I understand that it uses some id, this is what happens how many times I use it. So many times you need to change the id and rewrite js Is another option possible? I understand that you need to run a page with a script and assign a unique id from 1 to ~ and then to split it into even and odd and assign the odd variable to sync1 and even sync2, but I don’t like to realize the mind or the carousel either to the solution that he offered.

$(document).ready(function() { var sync1 = $("#sync1"); var sync2 = $("#sync2"); sync1.owlCarousel({ singleItem: true, slideSpeed: 1000, navigation: true, pagination: false, afterAction: syncPosition, responsiveRefreshRate: 200, }); sync2.owlCarousel({ items: 15, itemsDesktop: [1199, 10], itemsDesktopSmall: [979, 10], itemsTablet: [768, 8], itemsMobile: [479, 4], pagination: false, responsiveRefreshRate: 100, afterInit: function(el) { el.find(".owl-item").eq(0).addClass("synced"); } }); function syncPosition(el) { var current = this.currentItem; $("#sync2") .find(".owl-item") .removeClass("synced") .eq(current) .addClass("synced") if ($("#sync2").data("owlCarousel") !== undefined) { center(current) } } $("#sync2").on("click", ".owl-item", function(e) { e.preventDefault(); var number = $(this).data("owlItem"); sync1.trigger("owl.goTo", number); }); function center(number) { var sync2visible = sync2.data("owlCarousel").owl.visibleItems; var num = number; var found = false; for (var i in sync2visible) { if (num === sync2visible[i]) { var found = true; } } if (found === false) { if (num > sync2visible[sync2visible.length - 1]) { sync2.trigger("owl.goTo", num - sync2visible.length + 2) } else { if (num - 1 === -1) { num = 0; } sync2.trigger("owl.goTo", num); } } else if (num === sync2visible[sync2visible.length - 1]) { sync2.trigger("owl.goTo", sync2visible[1]) } else if (num === sync2visible[0]) { sync2.trigger("owl.goTo", num - 1) } } }); 
 #sync1 .item { background: #0c83e7; padding: 80px 0px; margin: 5px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; } #sync2 .item { background: #C9C9C9; padding: 10px 0px; margin: 5px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; cursor: pointer; } #sync2 .item h1 { font-size: 18px; } #sync2 .synced .item { background: #0c83e7; } 
 <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet" /> </head> <body> <div id="sync1" class="owl-carousel"> <div class="item"> <h1>1</h1> </div> <div class="item"> <h1>2</h1> </div> <div class="item"> <h1>3</h1> </div> <div class="item"> <h1>4</h1> </div> </div> <div id="sync2" class="owl-carousel"> <div class="item"> <h1>1</h1> </div> <div class="item"> <h1>2</h1> </div> <div class="item"> <h1>3</h1> </div> <div class="item"> <h1>4</h1> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script> </body> </html>

  • if possible, the access to the sliders should not be done through id , but through the class something like this: $(".carousel_name").each(function(){ $(this).owlCarousel(); }); - lexxl
  • @lexxl well how will this solve the problem of launching 8 roundabouts on a page? - Stasinskii
  • no need to contact unique id to activate slider - lexxl
  • @lexxl thanks, I will try, I found another fotorama alternative, here is the link . Here everything is already implemented, although I prefer the carousel. - Stasinskii

1 answer 1

If you want to initialize the carousel several times, you can do it in class, also if you want to save links to carousel instances for further work with them, you can write something like

 var Carusels = []; $('.carusel').each(function (index, elem) { Carusels.push($(elem).owlCarousel({ ... })); });
  • it turns out that I insert what was in $(document).ready(function() { ...... } script. Do I understand you correctly? - Stasinskii
  • Not. What you insert when you initialize the slider. Object with parameters - DStrokov