主要记一下插件 swiper 。方便以后查找
添加备注:swiper 与 vue 数据渲染有冲突!!暂时解决是分开了,放vue 实例块外面。2019-12-26
只需简单配置即可。
HTML示例代码块
<link rel="stylesheet" href="http://***/js/swiper/css/swiper.min.css">
<script src="http://***/weekend/js/swiper/js/swiper.min.js"></script>
...
<style type="text/css">
.swiper-container {width:100%;height:auto;}
.swiper-container img{width: 100%; max-width:100%;max-height:100%;}
</style>
...
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://****/2018/10/08/1538975103366776.png" /></div>
<div class="swiper-slide"><img src="http://****0928/173333839511.jpg" /></div>
<div class="swiper-slide"><img src="https://***08/1538975103366776.png" /></div>
<div class="swiper-slide"><img src="***8/0933459325750.jpg" /></div>
<div class="swiper-slide"><img src="***/10/08/1538975103366776.png" /></div>
</div>
<div class="swiper-pagination"></div>
</div>
js块
<script type="text/javascript">
//实例化Swiper
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
autoHeight:true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});//banner
</script>