Question

编辑：我发现了问题所在，将幻灯片设置为loop: true时，它将显示出元素滑动两次的效果。我该如何解决而又不将循环转为假？

-

我正在将swiper滑块与animate.css一起使用，以动画化幻灯片中的某些元素。我正在尝试从右（slideInRight）滑入一个特定的元素。

为此，我首先将元素的visibility设置为hidden，然后将动画类添加到元素，并将可见性设置为setTimeout方法内的可见性。

它可以工作，但是有一个小错误，实际上幻灯片运行了2个周期。它应该只是从右侧无缝滑入并进入它的位置。要查看实际效果，请运行以下代码：

$(document).ready(function() {

  var swiper = new Swiper('.swiper-container', {
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    }
  });

  var swiper = document.querySelector('.swiper-container').swiper;

  setTimeout(function() {
    $('.slide-container').css({
      'visibility': 'visible',
      'opacity': '1'
    }).addClass('animated slideInRight animate-duration-100');
  }, 1000);

  setTimeout(function() {
    $('.sy-title').css({
      'visibility': 'visible'
    }).addClass('animated slideInRight');
  }, 1600);

});

body {
  background: #3E3E3E;
}

.swiper-container {
  max-width: 300px;
}

.slide-container {
  opacity: 0;
  transition: 2s ease-in-out;
  visibility: hidden;
}

.img-fluid {
  max-width: 100%;
}

span.sy-title {
  display: block;
  color: #fff;
  font-weight: bold;
  visibility: hidden;
  font-size: 15px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="swiper-container">

  <div class="swiper-wrapper">

    <div class="swiper-slide">
      <div class="slide-container">
        <div class="img-container-1">
          <img class="img-fluid" src="http://placehold.it/500x300?text=slide1">
        </div>
        <div class="sy-info">
          <span class="sy-title">WATCH THIS TEXT ANIMATION</span>
        </div>
        <div class="img-container-2">
          <img class="img-fluid" src="http://placehold.it/500x300?text=slide1">
        </div>
        <div class="sy-availability">
          <span class="sy-title">WATCH THIS TEXT ANIMATION</span>
          <div class="img-container-3">
            <img class="img-fluid" src="http://placehold.it/500x300?text=slide1">
          </div>
        </div>
      </div>
    </div>

    <div class="swiper-slide">
      <div class="slide-container">
        <div class="img-container-1">
          <img class="img-fluid" src="http://placehold.it/500x300?text=slide2">
        </div>
        <div class="sy-info">
          <span class="sy-title">WATCH THIS TEXT ANIMATION</span>
        </div>
        <div class="img-container-2">
          <img class="img-fluid" src="http://placehold.it/500x300?text=slide2">
        </div>
        <div class="sy-availability">
          <span class="sy-title">WATCH THIS TEXT ANIMATION</span>
          <div class="img-container-3">
            <img class="img-fluid" src="http://placehold.it/500x300?text=slide2">
          </div>
        </div>
      </div>
    </div>

    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>

  </div>

Answer 1

由于滑块显示多个循环，请更正HTML结构。

$(document).ready(function() {

  var swiper = new Swiper('.swiper-container', {
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    }
  });

  var swiper = document.querySelector('.swiper-container').swiper;

  setTimeout(function() {
    $('.slide-container').css({
      'visibility': 'visible',
      'opacity': '1'
    }).addClass('animated slideInRight animate-duration-100');
  }, 1000);

  setTimeout(function() {
    $('.sy-title').css({
      'visibility': 'visible'
    }).addClass('animated slideInRight');
  }, 1600);

});

body {
  background: #3E3E3E;
}

.swiper-container {
  max-width: 300px;
}

.slide-container {
  opacity: 0;
  transition: 2s ease-in-out;
  visibility: hidden;
}

.img-fluid {
  max-width: 100%;
}

span.sy-title {
  display: block;
  color: #fff;
  font-weight: bold;
  visibility: hidden;
  font-size: 15px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="swiper-container">

  <div class="swiper-wrapper">

    <div class="swiper-slide">
      <div class="slide-container">
        <div class="img-container-1">
          <img class="img-fluid" src="https://image.yachtcharterfleet.com/charter-CLOUD-9/CLOUD-9-1.jpg?image_id=519748&k=3f0e&w=973&h=470&q=95&o=wc">
            <div class="sy-info">
          <span class="sy-title">WATCH THIS TEXT ANIMATION</span>
        </div>
        </div>
    </div>
    </div>
      
 <div class="swiper-slide">
        <div class="img-container-2">
          <img class="img-fluid" src="https://image.yachtcharterfleet.com/charter-CLOUD-9/CLOUD-9-1.jpg?image_id=519748&k=3f0e&w=973&h=470&q=95&o=wc">
            <div class="sy-availability">
          <span class="sy-title">WATCH THIS TEXT ANIMATION</span>
        </div>
        </div>
      </div>


 <div class="swiper-slide">
        <div class="img-container-3">
          <img class="img-fluid" src="https://image.yachtcharterfleet.com/charter-CLOUD-9/CLOUD-9-1.jpg?image_id=519748&k=3f0e&w=973&h=470&q=95&o=wc">
        </div>
      </div>

</div>

    </div>


  </div>

  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>

</div>

滑动幻灯片-使用animate.css动画幻灯片中的元素

1 个答案: