SwiperJS css动画禁用滑动功能

Question

我想增加一些动画到滑动is告诉用户，这个滑块有滑动功能，你可以滑动，动画运行良好，但它与滑动默认滑动功能冲突，你不能滑动幻灯片，有什么解决方案来解决这个问题吗？

​

var swiper = new Swiper(".mySwiper", {
  slidesPerView: 3,
});

.swiper-wrapper {
  transition-duration: 0ms;
  transform: translate3d(0px, 0px, 0px);
  animation: example 5s infinite alternate;
}

@keyframes example {
  0% {
  transform: translate3d(0px, 0px, 0px);
  }
  50% {
  transform: translate3d(0px, 0px, 0px);
  }
  75% {
  transform: translate3d(-20px, 0px, 0px);
  }
  100% {
  transform: translate3d(0px, 0px, 0px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
  </div>
</div>

​

Answer 1

将动画移动到父元素。

.swiper {
  animation: example 5s infinite alternate;
}