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 functionality to the sample code.
It's very simple, you just add the autoplay attribute in your code. Please check this code. Hope you can get the answer