Swiper全屏自适应图片轮播代码
生活随笔
收集整理的這篇文章主要介紹了
Swiper全屏自适应图片轮播代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Swiper全屏自適應圖片輪播代碼</title><link type="text/css" rel="stylesheet" href="css/style.css"></head>
<body><section class="pc-banner"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide swiper-slide-center none-effect"><a href="#"><img src="img/b1.png"></a><div class="layer-mask"></div></div><div class="swiper-slide"><a href="#"><img src="img/b2.png"></a><div class="layer-mask"></div></div><div class="swiper-slide"><a href="#"><img src="img/b3.png"></a><div class="layer-mask"></div></div><div class="swiper-slide"><a href="#"><img src="img/b4.png"></a><div class="layer-mask"></div></div><div class="swiper-slide"><a href="#"><img src="img/b5.png"></a><div class="layer-mask"></div></div></div><div class="button"><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div>
</section>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript">window.onload = function() {var swiper = new Swiper('.swiper-container',{autoplay: false,speed: 1000,autoplayDisableOnInteraction: false,loop: true,centeredSlides: true,slidesPerView: 2,pagination: '.swiper-pagination',paginationClickable: true,prevButton: '.swiper-button-prev',nextButton: '.swiper-button-next',onInit: function(swiper) {swiper.slides[2].className = "swiper-slide swiper-slide-active";},breakpoints: {668: {slidesPerView: 1,}}});}</script></body>
</html>
有需要附件請在素材無憂站下載：下載地址
總結
以上是生活随笔為你收集整理的Swiper全屏自适应图片轮播代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 360隐私保护器
- 下一篇： 雷军和董明珠的赌局真的输了吗?其实我们都