Question

43

The active item should be in the middle of Owl Carousel

rated 0 times [ 50] [ 7] / answers: 1 / hits: 37872 / 8 Years ago, mon, may 23, 2016, 12:00:00

I have a problem with my owl-carousel. Everything works fine but the active item is the first one on the page not the middle one (the colored is the active one). You can see this in the following screenshot.

Screenshot

I would like to have the middle item always be the active item.

My JQuery code :

jQuery(.owl-carousel).owlCarousel({

    items:3,      

    loop:true,

    nav:true,

    responsive:{

        0:{

            items:1,

            stagePadding: 450

        },

        600:{

            items:1,

            stagePadding: 450

        },

        1000:{

            items:1,

            stagePadding: 450

        }

    }

});

I found something like this but it doesn work:

jQuery(.owl-carousel).owlCarousel({

    items:3,      

    loop:true,

    nav:true,



// THIS IS THE NEW PART

    afterAction: function(el){

        //remove class active

        this

        .$owlItems

        .removeClass('active')

        //add class active

        this

        .$owlItems //owl internal $ object containing items

        .eq(this.currentItem + 1)

        .addClass('active')

        }

// END NEW PART



    responsive:{

        0:{

            items:1,

            stagePadding: 450

        },

        600:{

            items:1,

            stagePadding: 450

        },

        1000:{

            items:1,

            stagePadding: 450

        }

    }

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

darleneh

Add To Favorites

Follow

Total Points: 231

Total Questions: 110

Total Answers: 94

Location: Spain

Member since Thu, Dec 23, 2021

3 Years ago

darleneh questions

1 Bootstrap 5 collapse show/hide not working when invoked with JS

Fri, Apr 23, 21, 00:00, 3 Years ago

1 ReferenceError: Cannot access 'variable' before initialization

Tue, Apr 6, 21, 00:00, 3 Years ago

1 React hooks - how to force useEffect to run when state changes to the same value?

Wed, Mar 10, 21, 00:00, 3 Years ago

1 Vue + Typescript - Import errors with class based decorators

Thu, Oct 8, 20, 00:00, 4 Years ago

1 Storybook Component-level css file not working

Thu, Aug 20, 20, 00:00, 4 Years ago

View All

answered 8 Years ago brandt · Accepted Answer

Owl Carousel adds the .active class to all visible items, not only to one of them.

But when you use the center option, only the central item gets the .center class.

Look at this demo: https://codepen.io/glebkema/pen/Xjryjd

$('.owl-carousel').owlCarousel({

  autoplay: true,

  center: true,

  loop: true,

  nav: true,

});

.owl-item.active > div:after {

  content: 'active';

}

.owl-item.center > div:after {

  content: 'center';

}

.owl-item.active.center > div:after {

  content: 'active center';

}

.owl-item > div:after {

  font-family: sans-serif;

  font-size: 24px;

  font-weight: bold;

}

<div class=owl-carousel  owl-theme>

  <div><img src=https://via.placeholder.com/300x200/936/fff/?text=1 alt=></div>

  <div><img src=https://via.placeholder.com/300x200/693/fff/?text=2 alt=></div>

  <div><img src=https://via.placeholder.com/300x200/369/fff/?text=3 alt=></div>

  <div><img src=https://via.placeholder.com/300x200/f63/fff/?text=4 alt=></div>

</div>



<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css>

<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css>



<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js></script>

PS You can simplify your code.

items:3,

responsive:{

    0:{

        items:1,

        stagePadding: 450

    },

    600:{

        items:1,

        stagePadding: 450

    },

    1000:{

        items:1,

        stagePadding: 450

    }

is equivalent to

items:1,

stagePadding: 450,

PPS. 450 is a very huge for the stagePadding option on a narrow screen.