swiper.js 响应式多图轮播特效
2024-09-02 00:18:55
swiper.js实现响应式的左右切换图片案例展示布局
1、head引入css文件
<link type="text/css" rel="stylesheet" href="css/style.css">
2、head引入js文件
<script type="text/javascript" src="js/swiper.min.js"></script>
3、body引入HTML代码
<div class="banner-box">
<div class="banner-top"></div>
<div class="banner-title">
<h1>选择一个漂亮的模板</h1>
</div>
<div class="banner-text">
<p>别具一格的不仅是风景，更是您的官方网站</p>
</div>
<div class="banner-top-one"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-center none-effect">
<a href="javascript:;">
<img src="data:images/banner1.jpg" about="" title="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<img src="data:images/banner2.jpg" about="" title="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<img src="data:images/banner3.jpg" about="" title="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<img src="data:images/banner4.jpg" about="" title="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<img src="data:images/banner5.jpg" about="" title="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<img src="data:images/banner6.jpg" about="" title="">
</a>
</div>
</div>
<div class="banner-arrow">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="swiper-pagination"></div> </div>
<div class="banner-button">
<a href="javascript:;" class="do-btn banner-button-btn"> 更多模板 </a>
</div> <script type="text/javascript"> window.onload = function() {
var swiper = new Swiper('.swiper-container',{
autoplay: false, //是否自动滚动
speed: 500, //滚动速速
autoplayDisableOnInteraction: true,
loop: true,
centeredSlides: true,
slidesPerView: 3, //当前选中
pagination: '.swiper-pagination',
paginationClickable: true,
prevButton: '.swiper-button-prev', // 左右切换
nextButton: '.swiper-button-next', // 左右切换
onInit: function(swiper) {
swiper.slides[3].className = "swiper-slide swiper-slide-active"; //当前选中 状态
},
breakpoints: {
100: {
slidesPerView: 0,
}
}
});
} </script>
更多关于swiper.js特效，请参考：https://www.swiper.com.cn/demo/
最新文章
- PLSQL Developer 连接oracle(64) (instantclient)错误及解决方案
- Linux学习心得之 Linux下命令行Android开发环境的搭建
- R in a nutshell（连载）
- jsp还是html+ajax
- Android照片墙应用实现，再多的图片也不怕崩溃
- BZOJ3413 : 匹配
- Linux的运行级别和chkconfig用法
- 设计模式之 - 外观模式 （Facade design pattern）
- 【MYSQL】主从库查看及搭建
- static_cast, dynamic_cast, const_cast 类型转换如何使用？
- Oracle-13：Oracle中的表分区
- css：常见布局问题
- WPF 参数在Page见传递
- djago 定义后台地址
- Linux 生产实习01
- 关于Integer的比较，今天又犯了一个低级错误，记录下
- webform gridview合并单元格
- VFL使用
- 微信小程序 功能函数 获取验证码*
- gt811 driver