今天给一个小demo添加轮播图插件，顺便写文章记录下
1.打开网页
https://swiper.com.cn/demo/index.html
2.找到适合的轮播图插件
4.复制代码即可
你想把轮播图放到哪，就添加到哪里；
回到刚才的源代码
html代码
<!-- Swiper --> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> css代码
<!-- Demo styles --> <style>
html, body {
position: relative; height: 100%; } body {
background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .swiper {
width: 100%; height: 100%; } .swiper-slide {
text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img {
display: block; width: 100%; height: 100%; object-fit: cover; } </style> js代码
<!-- Initialize Swiper --> <script> var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); </script> 5.查看文档操作，适当添加所需要功能
API操作
https://swiper.com.cn/api/index.html
在自己的js文件中添加的一些功能
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/232977.html原文链接：https://javaforall.net
