Swiper 制作轮播图（附带效果 gif图）

秒速五厘米 2022-12-01 11:42 375阅读 0赞

## Swiper ##

官网链接：[https://www.swiper.com.cn/][https_www.swiper.com.cn]

文档链接：[Swiper使用方法][Swiper] 、[Swiper的API文档][Swiper_API]

### 引用Swiper ###

[下载 swiper][swiper] 或 [使用CDN][CDN]

### 应用 ###

*  为了让CSS代码层级关系更加明显，这里使用Less
 *  如果想清除浏览器默认效果，可以使用[CSS Tools: Reset CSS][CSS Tools_ Reset CSS]
    
    但是这个并不太好 [CSS reset的重新审视 – 避免样式重置][CSS reset_ _]

### 轮播图 ###

*  [图片下载链接（觅元素）][Link 1]
 *  HTML 代码

*  Less 代码

@imgBannerWidth: 1920px;
    @imgBannerHeight: 600px;
    .img-banner {
        width: @imgBannerWidth / 2;
        height: @imgBannerHeight / 2;
    }
    .swiper-banner {
        &:extend(.img-banner);
        overflow: hidden;
        #swiper-1 {
            img {
                &:extend(.img-banner);
            }
        }
    }

*  JS 代码

//初始化一个Swiper
    new Swiper(".swiper-banner", { 
        speed: 600, //切换速度
        loop: true, //循环模式
        effect: "cube", //切换效果：方块
        autoplay: { 
            delay: 1000, //自动播放
        },
    });

*  效果如下：

![效果1][1]

### 横屏滑动 ###

*  [图片下载链接（iconfont）][iconfont]
 *  HTML 代码

<div class="swiper-nav">
        <div class="swiper-wrapper" id="swiper-2">
            <div class="swiper-slide"><img src="./img/凯旋门.png" /><p>凯旋门</p></div>
            <div class="swiper-slide"><img src="./img/古罗马斗兽场.png" /><p>古罗马斗兽场</p></div>
            <div class="swiper-slide"><img src="./img/大本钟.png" /><p>大本钟</p></div>
            <div class="swiper-slide"><img src="./img/天坛.png" /><p>天坛</p></div>
            <div class="swiper-slide"><img src="./img/巴黎圣母院.png" /><p>巴黎圣母院</p></div>
            <div class="swiper-slide"><img src="./img/悉尼歌剧院.png" /><p>悉尼歌剧院</p></div>
            <div class="swiper-slide"><img src="./img/比萨斜塔.png" /><p>比萨斜塔</p></div>
            <div class="swiper-slide"><img src="./img/泰姬陵.png" /><p>泰姬陵</p></div>
        </div>
    </div>

*  Less 代码

.flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .swiper-nav {
        #swiper-2 {
            .swiper-slide {
                &:extend(.flex-center);
                flex-direction: column;
            }
            p {
                text-align: center;
            }
        }
    }

*  JS 代码

new Swiper(".swiper-nav", { 
    	slidesPerView: 4, //设置slider容器能够同时显示的slides数量
    });

*  效果如下：

![效果2][2]

### 数字下标 ###

*  HTML 代码

*  Less 代码

@bgColorHover: #ff2832;
    @bgColor: #646464;
    @bgColorFont: #fff;
    @imgIconWidth: 200px;
    @imgIconHeight: 200px;
    
    .img-icon {
        width: @imgIconWidth;
        height: @imgIconHeight;
    }
    
    .swiper-img,
    .swiper-img-click {
        width: @imgIconWidth + 40px;
        height: @imgIconHeight + 40px;
        background: lighten(@bgColor, 40%);
        overflow: hidden;
        #swiper-3 {
            .swiper-slide {
                &:extend(.flex-center);
                &:extend(.img-icon);
            }
        }
        .swiper-pagination {
            position: relative;
            bottom: 40px;
            .swiper-pagination-bullet {
                height: 20px;
                width: 20px;
                line-height: 20px;
                color: @bgColor;
            }
            .swiper-pagination-bullet-active {
                background: @bgColorHover;
            }
        }
    }

*  JS 代码

new Swiper(".swiper-img", { 
        loop: true,
        autoplay: { 
            delay: 1000,
        },
        pagination: { 
            el: ".swiper-pagination",
            type: "fraction", //分式
        },
    });
    new Swiper(".swiper-img-click", { 
        loop: true,
        autoplay: { 
            delay: 1000,
        },
        pagination: { 
            el: ".swiper-pagination",
            clickable: true, //点击分页器的指示点分页器会控制Swiper切换
            renderBullet: function(index, className) { 
                return '<span class="' + className + '">' + (index + 1) + '</span>';
            }, //渲染分页器小点
        },
    });

*  效果如下：

![效果三][20200826155510164.gif_pic_center]

### 缩略图显示 ###

*  [图片下载链接（官网案例）][Link 2]
 *  HTML 代码

*  Less 代码

#banner {
        max-width: 1200px;
        overflow: hidden;
        .swiper-focus{
            .swiper-slide {
                width: 100%;
                img {
                    width: 100%;
                }
            }
        }
        .swiper-pagination {
            position: relative;
            width: 100%;
            .swiper-pagination-bullet {
                width: 25%;
                height: auto;
                background: none;
                img {
                    font-size: 0;
                    width: 100%;
                }
            }
        }
    }

*  JS 代码

new Swiper('.swiper-focus', { 
        loop: true,
        pagination: { 
            el: '.swiper-pagination',
            clickable: true,
            renderBullet: function(index, className) { 
                return '<span class="' + className + '"><image src="img/0' + (index + 1) + '.jpg"></span>';
            },
        },
        zoom: true, //开启焦距功能：双击slide会放大/缩小
    });

*  效果如下：

![效果4][4]

### 其它 ###

swiper 还可以嵌套使用，实现一些梦幻效果

[https_www.swiper.com.cn]: https://www.swiper.com.cn/
[Swiper]: https://www.swiper.com.cn/usage/index.html
[Swiper_API]: https://www.swiper.com.cn/api/index.html
[swiper]: https://www.swiper.com.cn/download/index.html
[CDN]: https://www.swiper.com.cn/cdn/index.html
[CSS Tools_ Reset CSS]: https://sourl.cn/MiNzfr
[CSS reset_ _]: http://www.zhangxinxu.com/wordpress/?p=758
[Link 1]: https://sourl.cn/qSAcHh
[1]: /images/20221123/63cd4f93a74743de828fb0ce4e253652.png
[iconfont]: https://sourl.cn/L8Vem4
[2]: /images/20221123/afae5bb095f74475aaf2aa8feaee7e29.png
[20200826155510164.gif_pic_center]: /images/20221123/14267916190345f19789c18295ef3c43.png
[Link 2]: https://sourl.cn/APX8pS
[4]: /images/20221123/2659ebe54a5649f2b474a27bff94f9de.png