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>
我希望範例中的滑桿自動播放。
var mainSwiper = new Swiper(".swiper-container-v", {
direction: "vertical",
kyboard: true,
pagination: {
el: ".swiper-pagination-v",
clickable: true
},
mousewheel: true,
slideToClickedSlide:true,
});
我想在範例程式碼中新增自動播放功能。
這非常簡單，您只需在程式碼中新增自動播放屬性。請檢查此代碼。希望您能得到答案
var swiper = new Swiper('.swiper-5', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, loop: true, autoplay: { delay: 3000, disableOnInteraction: true, }, });