简单使用swiper实现轮播图

梦里梦外; 2023-06-25 03:29 62阅读 0赞

### 1、引入CSS CDN（在页面head） ###

### 2、引入JS CDN（在body中） ###

**类似于这种**

<!DOCTYPE html>
    <html>
    <head>
        ...
        <link rel="stylesheet" href="dist/css/swiper.min.css">
    </head>
    <body>
        ...
        <script src="dist/js/swiper.min.js"></script>
        ...
    </body>
    </html>

### 4、写入轮播需要的基本结构 ###

<div class="swiper-container">
        <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>
        
        <div class="swiper-pagination"></div>
        
        
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        
        <div class="swiper-scrollbar"></div>
    </div>

示例

<div class="carousel">
            
    
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./images/banner2.jpg.dpg" alt=""></div>
                    <div class="swiper-slide"><img src="./images/banner1.jpg.dpg" alt=""></div>
                    <div class="swiper-slide"><img src="./images/banner3.jpg.dpg" alt=""></div>
                </div>
                
                <div class="swiper-pagination"></div>
                
                <div class="swiper-scrollbar"></div>
            </div>
        </div>

你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container { 
        width: 600px;
        height: 300px;
    }

### 5、初始化Swiper：最好是挨着标签 ###

...
    <script>        
      var mySwiper = new Swiper ('.swiper-container', { 
        direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        
        // 如果需要分页器
        pagination: { 
          el: '.swiper-pagination',
        },
        
        // 如果需要前进后退按钮
        navigation: { 
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        
        // 如果需要滚动条
        scrollbar: { 
          el: '.swiper-scrollbar',
        },
      })        
      </script>
    </body>

**或**

**分页器样式默认是小圆点样式可以更改**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70]  
在sweiper官网的API可以找到

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70 1]  
如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

或者这样（Jquery和Zepto）(推荐)

完成。恭喜你，现在你的Swiper应该已经能正常切换了。

轮播图已经可以正常使用了。。。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191225164907926.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191225165245737.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk=,size_16,color_FFFFFF,t_70