Skip to content
Advertisement

I want slider autoplay

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,
  },
});
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement