CODEWITHSUNDEEP
javascriptphpjqueryowl-carousel
Francis Alvin Tan
Francis Alvin Tan

Reputation: 1077

Create counters for multiple Owl Carousel

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

Upvotes: 4

Views: 3272

Answers (1)

kockburn
kockburn

Reputation: 17616

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

Upvotes: 3

Related Questions