var mainSwiper = new Swiper(".swiper-container-v", { direction: "vertical", kyboard: true, pagination: { el: ".swiper-pagination-v", clickable: true }, mousewheel: true, slideToClickedSlide:true, }); var swiperH = new Swiper(".swiper-container-h", { spaceBetween: 50, pagination: { el: ".swiper-pagination-h", clickable: true }, loop: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, });
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Vsite Test2018</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <!-- Top Sliders --> <!--TOP SLIDER STARTS HERE --> <div class="top-slider-container"> <div class="swiper-container swiper-container-h"> <div class="swiper-wrapper"> <!--Slide 01 --> <div class="swiper-slide"> <div class="top-slide-left"> <h4>Explore the Power of</h4> <h2>AI + VR</h2> <p>Visualize and understand your data as never before thanks to our innovative use of Machine Learning, immersive visualization and collaborative analysis. </p> <a class="top-slider-button" href="">Watch the Video</a> </div> <div class="top-slide-right"> <div class="slide-right-img-container slide-in-fwd-center"> <img class="" src="http://malachisimonyan.com/uploads/v-temp/vrslide.png" alt=""> </div> </div> </div> <!--Slide 02 --> <div class="swiper-slide"> <div class="top-slide-left"> <h4>Experience</h4> <h2>Immersive Analytics</h2> <p>Full collaboration capabilities across multiple devices: run your analysis on Desktop, Mobile and Virtual Reality. </p> <a class="top-slider-button" href="">Watch the Video</a> </div> <div class="top-slide-right"> <div class="slide-right-img-container slide-in-fwd-center"> <img class="" src="http://malachisimonyan.com/uploads/v-temp/plat-monitor.png" alt=""> </div> </div> </div> <!--Slide 03 --> <div class="swiper-slide"> <div class="top-slide-left"> <h4>Explore Data using</h4> <h2>Innovative Maps</h2> <p>Look at your geo located data as never before thanks to our interactive maps: visualize on 2D maps or 3D globe!</p> <a class="top-slider-button" href="">Watch the Video</a> </div> <div class="top-slide-right"> <div class="slide-right-img-container slide-in-fwd-center"> <img class="" src="http://malachisimonyan.com/uploads/v-temp/slidemaps.png" alt=""> </div> </div> </div> <!--Slide 04 --> <div class="swiper-slide"> <div class="top-slide-left"> <h4>Engage & Share using</h4> <h2>Collaborative Analysis</h2> <p>SVO – Shared Virtual Office™: collaborative and fully customizable shared space to analyze data, build VR dashboards, present and discuss insights. </p> <a class="top-slider-button" href="">Watch the Video</a> </div> <div class="top-slide-right"> <div class="slide-right-img-container slide-in-fwd-center"> <img class="" src="http://malachisimonyan.com/uploads/v-temp/slidemaps-final.png" alt=""> </div> </div> </div> <!--Slide 05 --> <div class="swiper-slide"> <div class="top-slide-left"> <h4>Explore the Power of</h4> <h2>Smart Mapping</h2> <p>Visualize and understand your data as never before thanks to our innovative use of Machine Learning, immersive visualization and collaborative analysis. </p> <a class="top-slider-button" href="">Watch the Video</a> </div> <div class="top-slide-right"> <div class="slide-right-img-container slide-in-fwd-center"> <img class="" src="http://malachisimonyan.com/uploads/v-temp/vrslide.png" alt=""> </div> </div> </div> </div> <!--End Swiper Wrapper--> <div class="swiper-pagination swiper-pagination-h"></div> <!-- Add Arrows --> <div class="swiper-button-next swiper-button-white"></div> <div class="swiper-button-prev swiper-button-white"></div> </div> </div> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script> </body> </html>
I want the slider in the example to play automatically.
var mainSwiper = new Swiper(".swiper-container-v", { direction: "vertical", kyboard: true, pagination: { el: ".swiper-pagination-v", clickable: true }, mousewheel: true, slideToClickedSlide:true, });
I want to add autoplay feature to the code in the example.
Advertisement
Answer
Its very easy you just need to add autoplay property in your code. Please check this code. I hope you will get your answer
var swiper = new Swiper('.swiper-5', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, loop: true, autoplay: { delay: 3000, disableOnInteraction: true, }, });