主页 / 问题 / 803767
Accepted
YourDeveloper
Asked:2020-03-24 02:49:47 +0000 UTC2020-03-24 02:49:47 +0000 UTC

如何将最后一个活动元素设置为一个类？

  • 772

实际上，你需要给最后一个活动类一个额外的不透明度类，但是出了点问题

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

var sbAllItms = $('.owl-item.active').length;
$('.owl-carousel .owl-item.active').eq(sbAllItms - 1).addClass('opacity');

owl.on('changed.owl.carousel',function(event) {
    sbAllItms = $('.owl-item.active').length;
    $('.owl-carousel .owl-item.active').removeClass('opacity');
		$('.owl-carousel .owl-item.active').eq(sbAllItms - 1).addClass('opacity');
})
h4 {color: green; background:red;}

.opacity {
  opacity: .6;
  color:#000;
}
<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>


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

javascript

1 个回答

  1. Best Answer

    可以通过索引（-1）选择集合中的最后一个元素，也可以选择错误的滑块事件。

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

function slideOpacity(){
  $('.owl-carousel .owl-item.opacity').removeClass('opacity');
  $('.owl-carousel .owl-item.active').eq(-1).addClass('opacity');
}
    h4 {
  color: green;
  background: red;
}
.owl-item{
  transition:all .3s ease;
}
.opacity {
  opacity: .6;
  color: #000;
}
    <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>


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

    • 0

相关问题