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

    xiaoxiao2022-06-27  190

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

     


    最新回复(0)