猫头鹰旋转木马导航点顺利改变活跃课程

Question

在猫头鹰旋转木马中，我想要点状导航过渡我试图喜欢这个，但它不起作用。

 .slider.owl-theme .owl-dots .owl-dot span {
    display: none;
    position: absolute;
    width: 0; 
    height: 0; 
    top: -34px;
    left: 40%;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #ffffff;
    margin: 5px 7px;
    transition: all 0.7s ease;
    background: transparent;
 }

任何人都可以建议我如何实现这一帮助将不胜感激。

提前致谢...

Answer 1

Owl Carousel transition上已dots，但仅在opacity上设置，您应将其更改为all

<强>查找

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #D6D6D6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 30px;
}

替换为：

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #D6D6D6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: all .2s ease;
    border-radius: 30px;
}

或覆盖此属性：

.owl-theme .owl-dots .owl-dot span {
   transition: all .2s ease!important;
}

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})

.owl-theme .owl-dots .owl-dot span {
   transition: all .2s ease!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

Answer 2

我用了这个

MultiIndex