代码之家 › 专栏 › 技术社区 › Husna

猫头鹰旋转木马导航点平稳更改活动类

owl-carousel css-transitions html jquery

Husna · 技术社区 · 7 年前

在猫头鹰旋转木马中,我想在点导航中进行转换,我试着喜欢这个,但它不起作用。

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

如果有人能建议我如何实现这一目标,我将不胜感激。

提前感谢。。。

2 回复 | 直到 7 年前

Pedram Neo M Hacker 7 年前

猫头鹰旋转木马已经 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>

Carla Goncalves 4 年前

我用过这个

.owl-dot{ 
    &.active{
       span{
            background: $text-color!important;
        }
    }
}