滑動幻燈片-使用animate.css動畫幻燈片中的元素

Question

編輯：我想出了什么問題，當幻燈片設置為loop: true ，它將顯示元素兩次滑動的效果。 我如何解決這個問題而不將循環設為false？

-

我正在將swiper滑塊與animate.css一起使用，以動畫化幻燈片中的某些元素。 我正在嘗試從右（slideInRight）滑入一個特定的元素。

為此，我首先將元素的visibility設置為hidden ，然后將動畫類添加到元素，並將可見性在setTimeout方法內部設置為visible。

它可以工作，但是有一個小錯誤，實際上幻燈片似乎經歷了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>