swiper轮播图教程

今天给一个小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文件中添加的一些功能