swiper自動輪播可滑動
阿新 • • 發佈：2019-01-02
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<link rel="stylesheet" href="swiper-3.4.2.min.css">
</head>
<body>
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper" style="transform: translate3d(-2220px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide" style="width: 1080px; margin-right: 30px;"><img src="img/dog.jpg" alt=""></div>
<div class="swiper-slide swiper-slide-prev" style="width: 1080px; margin-right: 30px;"><img src="img/lol.png" alt=""></div>
<div class="swiper-slide swiper-slide-active" style="width: 1080px; margin-right: 30px;"><img src="img/qier.png" alt=""></div>
<div class="swiper-slide swiper-slide-next" style="width: 1080px; margin-right: 30px;">Slide 4</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</body>
<script src="jquery-1.12.4.js"></script>
<script src="swiper-3.4.2.jquery.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
</script>
</html>
<html>
<head lang="en">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<link rel="stylesheet" href="swiper-3.4.2.min.css">
</head>
<body>
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper" style="transform: translate3d(-2220px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide" style="width: 1080px; margin-right: 30px;"><img src="img/dog.jpg" alt=""></div>
<div class="swiper-slide swiper-slide-prev" style="width: 1080px; margin-right: 30px;"><img src="img/lol.png" alt=""></div>
<div class="swiper-slide swiper-slide-active" style="width: 1080px; margin-right: 30px;"><img src="img/qier.png" alt=""></div>
<div class="swiper-slide swiper-slide-next" style="width: 1080px; margin-right: 30px;">Slide 4</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</body>
<script src="jquery-1.12.4.js"></script>
<script src="swiper-3.4.2.jquery.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
</script>
</html>