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 >
<div >
<div >
<!--Slide 01 -->
<div >
<div >
<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 href="">Watch the Video</a>
</div>
<div >
<div >
<img src="http://malachisimonyan.com/uploads/v-temp/vrslide.png" alt="">
</div>
</div>
</div>
<!--Slide 02 -->
<div >
<div >
<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 href="">Watch the Video</a>
</div>
<div >
<div >
<img src="http://malachisimonyan.com/uploads/v-temp/plat-monitor.png" alt="">
</div>
</div>
</div>
<!--Slide 03 -->
<div >
<div >
<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 href="">Watch the Video</a>
</div>
<div >
<div >
<img src="http://malachisimonyan.com/uploads/v-temp/slidemaps.png" alt="">
</div>
</div>
</div>
<!--Slide 04 -->
<div >
<div >
<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 href="">Watch the Video</a>
</div>
<div >
<div >
<img src="http://malachisimonyan.com/uploads/v-temp/slidemaps-final.png" alt="">
</div>
</div>
</div>
<!--Slide 05 -->
<div >
<div >
<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 href="">Watch the Video</a>
</div>
<div >
<div >
<img src="http://malachisimonyan.com/uploads/v-temp/vrslide.png" alt="">
</div>
</div>
</div>
</div> <!--End Swiper Wrapper-->
<div ></div>
<!-- Add Arrows -->
<div ></div>
<div ></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. Please help me I want to add autoplay feature to the code in the example. Please help me I want to add autoplay feature to the code in the example. Please help me I want to add autoplay feature to the code in the example. Please help me
CodePudding user response：
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,
}, });