时间戳

首页 > 解决方案 > 如果猫头鹰第一个项目处于活动状态，如何在正文上添加类，如果最后一个项目处于活动状态，如何删除类？

javascript - 如果猫头鹰第一个项目处于活动状态，如何在正文上添加类，如果最后一个项目处于活动状态，如何删除类？

问题描述

当猫头鹰第一个项目处于活动状态时，我尝试了很多在身体上添加一个类，并在最后一个孩子处于活动状态时删除。

$('.slider2').owlCarousel({


    loop: false,
    items: 1,
    responsiveClass: true, autoplayHoverPause: true,
    autoplay: false,
    slideSpeed: 800,
    paginationSpeed: 900,
    autoplayTimeout: 3000,
    navText: ["<img src='images/left.png'>", "<img src='images/right.png'>"],
    onChanged: onChangedCallback
});
function onChangedCallback(event) {
    if ($(".slider2 .owl-item:first-child").hasClass("active")) {
        $("body").addClass("back");
    }

    else if ($(".slider2 .owl-item").last().hasClass("active")) {
        $("body").removeClass("next");
    }

}

标签： javascriptjquery

解决方案

你使用了错误的 Owl 回调函数。如果您使用而不是 onChange -> onDragged 它可以工作。

$('.slider2').owlCarousel({
    loop: false,
    items: 1,
    responsiveClass: true, autoplayHoverPause: true,
    autoplay: false,
    slideSpeed: 800,
    paginationSpeed: 900,
    autoplayTimeout: 3000,
    navText: ["<img src='images/left.png'>", "<img src='images/right.png'>"],
    responsive: {
        0: {
            items: 1

        },
        360: {
            items: 1

        },
        768: {
            items: 2

        },
        1200: {
            items: 5

        }
    }, onDragged: onChangedCallback
});
function onChangedCallback(event) {
    if ($(".slider2 .owl-item").first().hasClass("active")) {
        $("body").removeClass("red");
        $("body").addClass("blue");
    }

    else if ($(".slider2 .owl-item").last().hasClass("active")) {
        $("body").addClass("red");
        $("body").removeClass("blue");
    }

}
.red {
  background: red;
}
.blue {
  background: blue;
}

.carousel-wrap {
  margin: 90px auto;
  padding: 0 5%;
  width: 80%;
  position: relative;
}

/* fix blank or flashing items on carousel */
.owl-carousel .item {
  position: relative;
  z-index: 100; 
  -webkit-backface-visibility: hidden; 
}

/* end fix */
.owl-nav > div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}

.owl-nav i {
  font-size: 52px;
}

.owl-nav .owl-prev {
  left: -30px;
}

.owl-nav .owl-next {
  right: -30px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">



<body class="blue">
  <div class="carousel-wrap">
  <div class="slider2 owl-carousel">
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
  </div>
</div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>

推荐阅读