owl carousel, navigation center

2019-02-26 02:12发布

问题:

I use owl carousel plugin, can't find how to let navigation vertical align center, with option autoHeight.

http://codepen.io/anon/pen/jJAHL

I tried like below, but it only get last height.

$(this_gallery).owlCarousel({
  singleItem: true,
  autoHeight : true,
  navigation:true,
  // autoPlay : 2000,
  stopOnHover : true,
  afterAction: function() {
    var center_height = $(this_gallery).find('.owl-wrapper-outer').height();
    console.log(center_height);
    // $(this_gallery).find('.owl-buttons').css('top', center_height);
  }
});

回答1:

Instead of giving top position in the pixel give it in the percentage like following:

.owl-theme .owl-controls .owl-buttons .owl-prev {
    left: -45px;
    top: 45%;
}


回答2:

a bit late maybe but this worked well for me and might help others:

#photos .owl-nav{
    position: absolute;
    top: 45%;
    width: 100%;
}
#photos .owl-prev{
    float:left;
 }
#photos .owl-next{
    float:right;
}


回答3:

Change css for prev and next buttons

.owl-theme .owl-controls .owl-buttons .owl-next,.owl-theme .owl-controls .owl-buttons .owl-prev
 {
    top:40%;
 }