The active item should be in the middle of Owl Carousel

Question

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 of owl-caousel

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
        }
    }
});

@oboshto yes, i tried this but the active item is still the left one. — Gabbax0r, May 23 '16 at 10:21

Gleb Kemarsky · Accepted Answer · 2021-05-25T09:47:03.143

12

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.

edited May 25 '21 at 09:47

answered Sep 25 '16 at 10:50

Gleb Kemarsky

10,160
7
43
68

How can i add the same concept for click function. if i click the content that content becomes center. – Crock Apr 20 '17 at 05:07
@Crock I guess you need [to use events](https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html) instead of classes. Something like `$( CONTENT ).click(function() { owl.trigger('to.owl.carousel', POSITION ); })` – Gleb Kemarsky Apr 20 '17 at 05:21
`var sync2 = $(".owl-carousel").owlCarousel({ margin:10, dots:false, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } });` – Crock Apr 20 '17 at 05:25
This is my owl carousel. how can i get the centered the clicked content div in the item5 – Crock Apr 20 '17 at 05:26
@Crock it's a new issue. I think you need to open new question. – Gleb Kemarsky Apr 20 '17 at 05:29
http://stackoverflow.com/questions/43510957/the-clicked-item-should-be-in-center-in-owl-carousel – Crock Apr 20 '17 at 05:32
If I set the value of `stagePadding ` huge (350 - bigger). The active item is not center. why that? – huykon225 May 14 '18 at 07:53
@huykon225 Your information is not enough. Ask a new question and add [mcve]. The more detailed you describe what you have already done and the difficulties that you have encountered, the sooner someone from the community will offer you a suitable solution. – Gleb Kemarsky May 14 '18 at 09:57

The active item should be in the middle of Owl Carousel

1 Answers1