JavaScript
x
23
23
1
var mainSwiper = new Swiper(".swiper-container-v", {2
direction: "vertical",3
kyboard: true,4
pagination: {5
el: ".swiper-pagination-v",6
clickable: true7
},8
mousewheel: true,9
slideToClickedSlide:true,10
11
});12
var swiperH = new Swiper(".swiper-container-h", {13
spaceBetween: 50,14
pagination: {15
el: ".swiper-pagination-h",16
clickable: true17
},18
loop: true,19
navigation: {20
nextEl: '.swiper-button-next',21
prevEl: '.swiper-button-prev',22
},23
});JavaScript
1
116
116
1
<!DOCTYPE html>2
<html lang="en" >3
<head>4
<meta charset="UTF-8">5
<title>CodePen - Vsite Test2018</title>6
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css'><link rel="stylesheet" href="./style.css">7
8
</head>9
<body>10
<!-- partial:index.partial.html -->11
<!-- Top Sliders -->12
13
14
<!--TOP SLIDER STARTS HERE -->15
<div class="top-slider-container">16
<div class="swiper-container swiper-container-h">17
<div class="swiper-wrapper">18
19
<!--Slide 01 -->20
<div class="swiper-slide">21
22
<div class="top-slide-left">23
<h4>Explore the Power of</h4>24
<h2>AI + VR</h2>25
<p>Visualize and understand your data as never before thanks to our innovative use of Machine Learning, immersive visualization and collaborative analysis. </p>26
<a class="top-slider-button" href="">Watch the Video</a>27
</div>28
<div class="top-slide-right">29
<div class="slide-right-img-container slide-in-fwd-center">30
<img class="" src="http://malachisimonyan.com/uploads/v-temp/vrslide.png" alt="">31
</div>32
</div>33
</div>34
35
<!--Slide 02 -->36
<div class="swiper-slide">37
38
<div class="top-slide-left">39
<h4>Experience</h4>40
<h2>Immersive Analytics</h2>41
<p>Full collaboration capabilities across multiple devices: run your analysis on Desktop, Mobile and Virtual Reality. </p>42
<a class="top-slider-button" href="">Watch the Video</a>43
</div>44
<div class="top-slide-right">45
<div class="slide-right-img-container slide-in-fwd-center">46
<img class="" src="http://malachisimonyan.com/uploads/v-temp/plat-monitor.png" alt="">47
</div>48
</div>49
</div>50
51
<!--Slide 03 -->52
<div class="swiper-slide">53
54
<div class="top-slide-left">55
<h4>Explore Data using</h4>56
<h2>Innovative Maps</h2>57
<p>Look at your geo located data as never before thanks to our interactive maps: visualize on 2D maps or 3D globe!</p>58
<a class="top-slider-button" href="">Watch the Video</a>59
</div>60
<div class="top-slide-right">61
<div class="slide-right-img-container slide-in-fwd-center">62
<img class="" src="http://malachisimonyan.com/uploads/v-temp/slidemaps.png" alt="">63
</div>64
</div>65
66
</div>67
68
<!--Slide 04 -->69
<div class="swiper-slide">70
71
<div class="top-slide-left">72
<h4>Engage & Share using</h4>73
<h2>Collaborative Analysis</h2>74
<p>SVO – Shared Virtual Office™: collaborative and fully customizable shared space to analyze data, build VR dashboards, present and discuss insights. </p>75
<a class="top-slider-button" href="">Watch the Video</a>76
</div>77
<div class="top-slide-right">78
<div class="slide-right-img-container slide-in-fwd-center">79
<img class="" src="http://malachisimonyan.com/uploads/v-temp/slidemaps-final.png" alt="">80
</div>81
</div>82
83
</div>84
85
<!--Slide 05 -->86
<div class="swiper-slide">87
<div class="top-slide-left">88
<h4>Explore the Power of</h4>89
<h2>Smart Mapping</h2>90
<p>Visualize and understand your data as never before thanks to our innovative use of Machine Learning, immersive visualization and collaborative analysis. </p>91
<a class="top-slider-button" href="">Watch the Video</a>92
</div>93
<div class="top-slide-right">94
<div class="slide-right-img-container slide-in-fwd-center">95
<img class="" src="http://malachisimonyan.com/uploads/v-temp/vrslide.png" alt="">96
</div>97
</div>98
</div>99
100
</div> <!--End Swiper Wrapper-->101
102
<div class="swiper-pagination swiper-pagination-h"></div>103
104
<!-- Add Arrows -->105
<div class="swiper-button-next swiper-button-white"></div>106
<div class="swiper-button-prev swiper-button-white"></div>107
108
</div>109
</div>110
</div>111
<!-- partial -->112
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js'></script>113
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script>114
115
</body>116
</html>I want the slider in the example to play automatically.
JavaScript
1
12
12
1
var mainSwiper = new Swiper(".swiper-container-v", {2
direction: "vertical",3
kyboard: true,4
pagination: {5
el: ".swiper-pagination-v",6
clickable: true7
},8
mousewheel: true,9
slideToClickedSlide:true,10
11
});12
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
JavaScript
1
12
12
1
var swiper = new Swiper('.swiper-5', {2
navigation: {3
nextEl: '.swiper-button-next',4
prevEl: '.swiper-button-prev',5
},6
loop: true,7
autoplay: {8
delay: 3000,9
disableOnInteraction: true,10
},11
});12