Ad

Create Counters For Multiple Owl Carousel

- 1 answer

I need to create multiple owl carousel slider, I need it to be globally same even if I add many sliders, this is working until I needed a counter over a slider.

So every slider has a counter, (1/5 or 1/9) that changes when its scrolled or clicked the nav button

Here is what i have but the counters are broken, its not independently working.

$(function(){
var owl = $('.owl-carousel');
owl.owlCarousel({
  autoplay: 2000,
  items:1,
  nav:true,
  loop: true,
  onInitialized  : counter, //When the plugin has initialized.
  onTranslated : counter //When the translation of the stage has finished.
});

function counter(event) {
   var element   = event.target;         // DOM element, in this example .owl-carousel
    var items     = event.item.count;     // Number of items
    var item      = event.item.index + 1;     // Position of the current item

  // it loop is true then reset counter from 1
  if(item > items) {
    item = item - items
  }
  $('#counter').html("item "+item+" of "+items)
}
});

Here is my FIDDLE

Ad

Answer

Explanation:

Actually the way you determine the current position works fine. The issue is updating the correct div with the counter information.

In your fiddle, it looks like you're searching for .counter, but what you should be searching for is the .counter that is a child of your carousel container.

Solution:

$(element).parent().find('.counter').html("item " + item + " of " + items)

Working example:

$(function() {
  var owl = $('.owl-carousel');
  owl.owlCarousel({
    autoplay: 2000,
    items: 1,
    nav: true,
    loop: true,
    onInitialized: counter, //When the plugin has initialized.
    onTranslated: counter //When the translation of the stage has finished.
  });

  function counter(event) {
  	  
    var element = event.target; // DOM element, in this example .owl-carousel
    var items = event.item.count; // Number of items
    var item = event.item.index + 1; // Position of the current item

    // it loop is true then reset counter from 1
    if (item > items) {
      item = item - items
    }
    $(element).parent().find('.counter').html("item " + item + " of " + items)
  }
});
.container {
  width: 350px;
  margin: 15px auto;
}
<link target="_blank" rel="nofollow noreferrer" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>

<div class="container">
  <div class="owl-carousel">
    <!-- 4 items -->
    <div class="slides"><img src="https://unsplash.it/400/300/?image=121" alt="img1" /></div>
    <div class="slides"><img src="https://unsplash.it/400/300/?image=232" alt="img1" /></div>
    <div class="slides"><img src="https://unsplash.it/400/300/?image=343" alt="img1" /></div>
    <div class="slides"><img src="https://unsplash.it/400/300/?image=454" alt="img1" /></div>
  </div>
  <div class="counter"></div>
</div>
<br><br>
<div class="container">
  <div class="owl-carousel">
    <!-- 3 items -->
    <div class="slides"><img src="https://unsplash.it/400/300/?image=121" alt="img1" /></div>
    <div class="slides"><img src="https://unsplash.it/400/300/?image=232" alt="img1" /></div>
    <div class="slides"><img src="https://unsplash.it/400/300/?image=343" alt="img1" /></div>
  </div>
  <div class="counter"></div>
</div>

Ad
source: stackoverflow.com
Ad