Owlcarousel2: Last dot cant be set to active as long as total/visible-item-ratio is not an Integer

Created on 9 Nov 2015 · 4Comments · Source: OwlCarousel2/OwlCarousel2

I hope this is not a common issue and i'm asking a silly question here (i haven't found any info about it while searching).

I'm using the owl slider script (v 2.0.0) based on jquery (v 1.11.3).
The dot navigation works just fine as long as the number of elements total divided by the number of elements to be shown on the screen at once (option 'items') is an Integer.
If not (e.g. 8 elements total and 3 should be visible on the screen) the last dot will never get the active-class when clicked but always the dot next to it.

I don't get any errors in the JS-console.

The HTML and JavaScript code:

<!DOCTYPE html>
<html>
    <head>
        <title>OWL Slider v2</title>
        <link rel="stylesheet" href="../libs/owl.carousel.2.0.0/assets/owl.carousel.css">
        <link rel="stylesheet" href="../libs/owl.carousel.2.0.0/assets/owl.theme.css">
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="../libs/owl.carousel.2.0.0/owl.carousel.js"></script>
    </head>
    <body>
        <div id="owl-example" class="owl-carousel">
            <div> Your Content 1</div>
            <div> Your Content 2</div>
            <div> Your Content 3</div>
            <div> Your Content 4</div>
            <div> Your Content 5</div>
            <div> Your Content 6</div>
            <div> Your Content 7</div>
            <div> Your Content 8</div>
            <div> Your Content 9</div>
        </div>
        <div id="owl-example2" class="owl-carousel">
            <div> Your Content 1</div>
            <div> Your Content 2</div>
            <div> Your Content 3</div>
            <div> Your Content 4</div>
            <div> Your Content 5</div>
            <div> Your Content 6</div>
            <div> Your Content 7</div>
            <div> Your Content 8</div>
        </div>
        <script>
            $(document).ready(function() {

                /* init 1st slider using default settings */
                $("#owl-example").owlCarousel({
                    items:3,
                });

                /* init 2nd slider using default settings */
                $("#owl-example2").owlCarousel({
                    items:3,
                });

            });
        </script>
    </body>
</html>

Thanks for any hints in advance.

UPDATE:

This only occurs as long as the 'loop'-option is set to false.

Source

HansGerber

Most helpful comment

HansGerber,

I also had this issue. I made use of the carousel events to listen for any changes and perform our own action.

var owl = $('.my-carousel').owlCarousel({
theme: "owl-theme",
loop:false,
nav:false
});

owl.on('changed.owl.carousel', function (event) {
    if (event.item.count - event.page.size == event.item.index)
        $(event.target).find('.owl-dots div:last')
          .addClass('active').siblings().removeClass('active');
});

manumohan on 11 Mar 2016

👍9

All 4 comments

+1 same problem

anorudes on 3 Dec 2015

HansGerber, you can use this code:

    $('.reviews .list').owlCarousel({
      loop: false,
      margin: 0,
      items: 2,
      nav: false
    }).on('changed.owl.carousel', owlFixLastDot);

var owlFixLastDot = (event) => {
  const count = event.item.count % 2 ? event.item.count -1 : event.item.count;
  if (event.item.index === count - 1) {
    $(event.target).find('.owl-dots div:last')
      .addClass('active')
      .siblings().removeClass('active')
  }
};

anorudes on 3 Dec 2015

and how do you enable and disable a click event when the other had itens?
I added a click event but the event remains active

GuiAlmeida on 19 Jan 2016

HansGerber,

I also had this issue. I made use of the carousel events to listen for any changes and perform our own action.

var owl = $('.my-carousel').owlCarousel({
theme: "owl-theme",
loop:false,
nav:false
});

owl.on('changed.owl.carousel', function (event) {
    if (event.item.count - event.page.size == event.item.index)
        $(event.target).find('.owl-dots div:last')
          .addClass('active').siblings().removeClass('active');
});

manumohan on 11 Mar 2016

👍9

Was this page helpful?

0 / 5 - 0 ratings