Question

我使用owl carousel插件，无法通过选项autoHeight找到如何让导航垂直对齐中心。

我尝试过如下，但它只能达到最后的高度。

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

Answer 1

而不是在像素中提供top position，而不是像percentage那样给出它：

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

Answer 2

可能有点晚了，但这对我来说效果很好，可能对其他人有所帮助：

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

Answer 3

您可以将这些代码添加到样式表中。这些代码将使您的猫头鹰轮播导航居中。希望你会喜欢。

    .owl-nav .owl-next, .owl-nav .owl-prev {
        position: absolute;
        top: 48%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    .owl-nav .owl-next {
        right: 0;
        display: flex;
        margin-right: 2%;
        font-size: 25px !important;
    }
    .owl-nav .owl-prev{
        left: 0;
        display: flex;
        margin-left: 2%;
        font-size: 25px !important;
    }

Answer 4

更改prev和下一个按钮的css

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

Answer 5

您可以尝试以下方法：

.owl-nav div {
      position: absolute;
      left: -50px;
      top: 45%;
      color: $theme-color;
      display: table;
      &.owl-next {
        left: auto;
        right: -50px;
      }
    }

Answer 6

.owl-prev, .owl-next
{
    position: absolute;
}
.owl-prev
{
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px !important;
    background-color: transparent !important;
    outline: none !important;
}
.owl-next
{
    right: -60px;
    top: 50%;`enter code here`
    transform: translateY(-50%);
    font-size: 40px !important;
    background-color: transparent !important;
    outline: none !important;
}

Answer 7

body .owl-nav {
  position: absolute;
  top: calc(50% - 14px);
  width: 104%;
  left: -47px;
  display: flex;
  justify-content: space-between;
}

button.owl-prev>span,
button.owl-next>span {
  background: #efefef;
  font-size: 49px;
  border-radius: 50%;
  padding: 7px 7px 14px 7px;
  width: 50px;
  height: 50px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 600;
}

猫头鹰旋转木马，导航中心

7 个答案: