前端页面 使用swiper插件的轮播图

主要记一下插件  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>