title: Owl Carousel Current Slide and Number of Slides WITH loop option (php)
body: <p>So I've looked at a few questions so far, and none of these I've seen have really helped me get to my solution.</p>
  
  <p>I need to get a counter on my slider that's using Owl Carousel. I need to get a current slide count and the number of items in the slider.</p>
  
  <p>The thing is, that I am telling the slider to loop back to the beginning when it hits the last slide.</p>
  
  <p>Some of the code examples I've looked at work, except for one thing. It seems Owl Carousel adds 2 items at the beginning and 2 items at the end, with the class <code>cloned</code> appended to them. That messes with the code counts I've been using.</p>
  
  <p>I've tried to isolate the cloned count and that works, but the <code>currentIndex</code> is where I am falling into problems. Trying to get that count to be accurate isn't working. If I have say 4 slides, <code>currentIndex</code> starts at 3 and goes up to 8 while <code>totalItems</code> shows 4.</p>
  
  <p>Any help is appreciated!</p>
  
  <p>I am using <a href="https://owlcarousel2.github.io/OwlCarousel2/" rel="nofollow noreferrer">OwlCarousel 2</a></p>
  
  <p>Here is the code I am using:</p>
  
  <pre><code>var = mapSliderOptions = {
          loop: true,
          margin: 0,
          items: 1,
          autoWidth: false,
          mouseDrag: true,
          touchDrag: true,
          dots: false,
          onInitialized  : counter, //When the plugin has initialized.
          onTranslated : counter,
          responsive: {
              0: {
                  autoplay: true,
                  autoplayTimeout: 5000,
                  autoplayHoverPause: true
              },
              768: {
                  autoplay: false,
                  items: 1
              }
          }
      },
  
  function counter(event) {
      var totalItems = $('.owl-item:not(.cloned)' ).length;
      var currentIndex = $('div.active').index() + 1 ;
  
      $('#counter').html("item "+ currentIndex +" of " + totalItems);
  }
  
  
  $('.map-hero-slider').owlCarousel( mapSliderOptions );
  </code></pre>