Swiper

最新推荐文章于 2023-06-30 18:32:28 发布
最新推荐文章于 2023-06-30 18:32:28 发布
阅读量6k 收藏 37
点赞数 1
分类专栏： 前端开发中常用的一些小型框架及插件 文章标签： swiper
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43285360/article/details/121431103
版权

 

一、swiper基本使用

1.1 什么是swiper?

Swiper是纯javascript打造的滑动特效插件，面向PC、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

这里以 swiper7为例

     

1.2 如何使用swiper?

  1. 引入swiper对应的css和js文件(swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同)
  2. 按照框架的需求搭建三层结构
  3. 创建一个Swiper对象, 将容器元素传递给它

1.3 示例

    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <script src="js/swiper-bundle.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .swiper{
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        .swiper>ul{
            list-style: none;
        }
    </style>
<div class="swiper">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">Slide 1</li>
        <li class="swiper-slide">Slide 2</li>
        <li class="swiper-slide">Slide 3</li>
    </ul>
</div>
let mySwiper = new Swiper ('.swiper');

 

二、swiper高级使用

除了基本的使用以外还可以设置分页器、导航按钮、自动轮播、无限轮播等，具体操作可参考：

swiper中文官网API文档

2.1 示例

    <link rel="stylesheet" href="css/swiper-bundle.min.css" />
    <script src="js/swiper-bundle.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .swiper {
        width: 400px;
        height: 300px;
        border: 1px solid #000;
        margin: 100px auto;
        overflow: hidden;
        position: relative;
      }
      .swiper > ul {
        list-style: none;
        position: absolute;
      }
      .swiper-pagination-bullet {
        background: red;
      }
      .swiper-button-next {
        background: red;
      }
    </style>
    <div class="swiper">
      <ul class="swiper-wrapper">
        <li class="swiper-slide">Slide 1</li>
        <li class="swiper-slide">Slide 2</li>
        <li class="swiper-slide">Slide 3</li>
      </ul>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
     let mySwiper = new Swiper(".swiper", {
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        loop: true, // 循环模式选项
        autoplay:true, // 自动轮播
        autoplay: {
            delay: 1000,//1秒切换一次
            disableOnInteraction: false,//用户交互
        },
        speed: 2000, //设置切换速度
      });

 

2.3 示例2--移动端轮播图

    <link rel="stylesheet" href="css/swiper-bundle.min.css" />
    <script src="js/swiper-bundle.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        touch-action: none;
      }
      div {
        width: 100%;
      }
      ul {
        list-style: none;
      }
      ul > li > img {
        width: 100%;
        vertical-align: bottom;
      }
      .my-bullet {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50%;
        margin: 0 5px;
      }
      .my-bullet-active {
        background: #f40;
        opacity: 1;
      }
      .swiper-button-prev,
      .swiper-button-next {
        width: 30px;
        height: 50px;
        background: rgba(0, 0, 0, 0.3);
      }
      .swiper-button-prev:after,
      .swiper-button-next:after {
        content: "";
      }
      .swiper-button-prev::before {
        content: "<";
        display: inline-block;
        width: 30px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-weight: bold;
        font-size: 30px;
        color: #fff;
      }
      .swiper-button-next::before {
        content: ">";
        display: inline-block;
        width: 30px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-weight: bold;
        font-size: 30px;
        color: #fff;
      }
    </style>
    <div class="swiper">
      <ul class="swiper-wrapper">
        <li class="swiper-slide"><img src="images/img1.jpg" alt="" /></li>
        <li class="swiper-slide"><img src="images/img2.jpg" alt="" /></li>
        <li class="swiper-slide"><img src="images/img3.jpg" alt="" /></li>
        <li class="swiper-slide"><img src="images/img4.jpg" alt="" /></li>
      </ul>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
      let mySwiper = new Swiper(".swiper", {
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          bulletClass: "my-bullet", //设置分页器默认状态下的类名
          bulletActiveClass: "my-bullet-active", //自定义分页器内当前活动块的指示小点的类名
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        loop: true, // 循环模式选项
        autoplay: {
          delay: 2000,
          disableOnInteraction: false, //用户交互
        },
      });

 

三、Swiper Animate使用方法

用于在Swiper内快速制作CSS3动画效果的小插件，适用于Swiper2.x、Swiper3.x、Swiper4.x和Swiper5.x

这里以 swiper4.x 为例

具体可参考：swiper动画

3.1 示例

    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/swiper.animate.min.css">
    <script src="js/swiper.js"></script>
    <script src="js/swiper.animate1.0.3.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background: #f00;
            margin: 0 auto;
        }

        /* 自定义动画 */
        @keyframes myFadeIn {
            0% {
                opacity: 0;
                transform: scale(2);
            }

            100% {
                opacity: 1;
                transform: scale(0.5);
            }
        }

        .myFadeIn {
            -webkit-animation-name: myFadeIn;
            /* 切换自定义动画名称为自己的 */
            animation-name: myFadeIn; 
        }
    </style>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <!--
            swiper-animate-effect：切换效果，例如 fadeInUp
            swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
            swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s
            -->
            <p class="ani" swiper-animate-effect="myFadeIn">内容</p>
        </div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>
    let mySwiper = new Swiper ('.swiper-container', {
        on:{
            init: function(){
                swiperAnimateCache(this); //隐藏动画元素 
                swiperAnimate(this); //初始化完成开始动画
            },
            slideChangeTransitionEnd: function(){
                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            }
        }
    });

 

四、综合案例--酷狗音乐

    <title>酷狗音乐手机版</title>
    <meta name="keywords" content="酷狗音乐手机版,酷狗,音乐">
    <meta name="description" content="酷狗音乐手机版">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/swiper.animate.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/swiper.js"></script>
    <script src="js/swiper.animate1.0.3.min.js"></script>
    <script src="js/index.js"></script>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <!--第一屏-->
        <div class="swiper-slide section1">
            <img src="images/section1-title.png" class="ani" swiper-animate-effect="myFadeIn">
            <img src="images/section1-img.png" class="ani" swiper-animate-effect="fadeInUp">
            <img src="images/section1-btn.png" alt="">
        </div>

        <!--第二屏-->
        <div class="swiper-slide section">
            <img src="images/section2-title.png" class="ani" swiper-animate-effect="myFadeIn" swiper-animate-duration="0.5s">
            <img src="images/section2-img.png" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-delay="0.5s">
        </div>

        <!--第三屏-->
        <div class="swiper-slide section">
            <img src="images/section3-title.png" class="ani" swiper-animate-effect="myFadeIn" swiper-animate-duration="0.5s">
            <img src="images/section3-img.png" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-delay="0.5s">
        </div>

        <!--第四屏-->
        <div class="swiper-slide section">
            <img src="images/section4-title.png" class="ani" swiper-animate-effect="myFadeIn" swiper-animate-duration="0.5s">
            <img src="images/section4-img.png" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-delay="0.5s">
        </div>

        <!--第五屏-->
        <div class="swiper-slide section">
            <img src="images/section5-title.png" class="ani" swiper-animate-effect="myFadeIn" swiper-animate-duration="0.5s">
            <img src="images/section5-img.png" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-delay="0.5s">
        </div>

        <!--第六屏-->
        <div class="swiper-slide section6">
            <div class="top ani" swiper-animate-effect="myFadeIn">
                <img src="images/section6-logo.png" alt="">
                <p>适用于iOS 8.0及以上系统版本</p>
                <p>
                    <img src="images/section6-back.png" alt="">
                    <img src="images/section6-share.png" alt="">
                </p>
                <p>我们致力于推动网络正版音乐的发展</p>
                <p>相关版权合作请联系copyrights@kugou.com</p>
                <p>
                    <a href="#">在线听歌</a>
                    <span>|</span>
                    <a href="#">用户服务协议</a>
                    <span>|</span>
                    <a href="#">卸载说明</a>
                </p>
            </div>
            <div class="bottom">
                <p>粤ICP备09017694号-2</p>
                <p>公司名称：广州酷狗计算机科技有限公司</p>
                <p>公司地址：广州市天河区黄埔大道中315号羊城晚报创意产业园内自编号1-18</p>
                <p>公司电话：<i>020-37529000</i></p>
            </div>
        </div>
    </div>
</div>

index.css，

html,body{
    width: 100%;
    height: 100%;
}
body{
    background: url("./../images/bg.png") no-repeat center bottom;
    background-size: 100% auto;
}
.swiper-container, .swiper-wrapper, .swiper-slide{
    width: 100%;
    height: 100%;
}
/*第一屏*/
.section1>img{
    display: block;
    margin: 0 auto;
}
.section1>img:nth-of-type(1){
    width: 49.58%;
    margin-top: 10.9375%;
}
.section1>img:nth-of-type(2){
    width: 53.88%;
    margin-top: 10%;
}
.section1>img:nth-of-type(3){
    width: 56%;
    margin-top: 10%;
}
@keyframes myFadeIn {
    0% {
        opacity: 0;
        transform: scale(2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.myFadeIn {
    -webkit-animation-name: myFadeIn;
    animation-name: myFadeIn
}
/*第2~5屏*/
.section>img{
    display: block;
    margin: 0 auto;
}
.section>img:nth-of-type(1){
    width: 60.8%;
    margin-top: 10.9375%;
}
.section>img:nth-of-type(2){
    width: 68.2%;
    margin-top: 10%;
}
/*第六屏*/
.section6>.top{
    margin-top: 30%;
}
.section6>.top>img:nth-of-type(1){
    display: block;
    margin: 0 auto;
    width: 26%;
}
.section6>.top>p:nth-of-type(1){
    font-size: 14px;
    color: #9c9c9c;
    text-align: center;
    margin-top: 2%;
}
.section6>.top>p:nth-of-type(2){
    text-align: center;
    margin-top: 5%;
}
.section6>.top>p:nth-of-type(2) img{
    width: 33%;
    margin: 0 10px;
}
.section6>.top>p:nth-of-type(3), .section6>.top>p:nth-of-type(4){
    margin-top: 10%;
    font-size: 14px;
    color: #666;
    line-height: 25px;
    text-align: center;
}
.section6>.top>p:nth-of-type(4){
     margin-top: 0;
 }
.section6>.top>p:nth-of-type(5){
    color: #0090ff;
    margin-top: 15%;
    text-align: center;
    font-size: 14px;
}
.section6>.top>p:nth-of-type(5) a{
    color: #0090ff;
}
.section6>.top>p:nth-of-type(5) span{
    margin: 0 5%;
}
.section6>.bottom{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 20px;
}
.section6>.bottom>p{
    font-size: 12px;
    color: #9c9c9c;
    text-align: center;
    line-height: 20px;
}
.section6>.bottom>p>i{
    color: #0090ff;
}

index.js，

window.onload = function () {
    let mySwiper = new Swiper ('.swiper-container', {
        direction: 'vertical', // 垂直切换选项
        on:{
            init: function(){
                swiperAnimateCache(this); //隐藏动画元素
                swiperAnimate(this); //初始化完成开始动画
            },
            slideChangeTransitionEnd: function(){
                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            }
        }
    });
}

 

小白小白从不日白
关注
  • 1
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
关于swiper的使用方法
ff_717的博客
03-14 908
关于swiper的安装和使用
swiper实现异形轮播效果
10-15
在本文中，我们将探讨如何使用Swiper库来实现一种特殊的轮播效果——异形轮播。Swiper是一款流行的JavaScript库，常用于创建响应式的滑动内容，如轮播图、幻灯片展示等。它的强大之处在于其丰富的自定义选项和良好的...
前端笔记——Swiper（持续更新中）~
Mike白的博客
06-30 2563
Swiper 是一个流行的、免费的、开源的JavaScript库，用于创建移动设备和桌面端的滑块轮播图、触摸滑动页面、图片和内容的滑动和切换效果。Swiper 可以实现多种滑动效果，如淡入淡出、平移、3D 立体翻转等，同时也支持响应式设计和自动播放等功能。Swiper 具有良好的可定制性和易用性，支持多种平台和浏览器，还提供了丰富的 API 和事件，可以轻松地实现各种复杂的滑动效果和交互动画。
swiper轮播图使用方法（详解）
没有简介
05-18 3211
提示：这里对文章进行总结：反正也不会有人看到这里，所以我就写我自己的！！！！！建议： 一般情况下，轮播图的大小样式，自动播放等均可修改，建议网页区域设计完成后，将需要的轮播图样式放进对应的区域内，省时省事。
使用 Swiper4.5.3、Swiper11 的示例
Lyrelion的博客
07-23 4405
使用 Swiper4.5.3、Swiper11 的示例
04-swiper概述
前端萌新
08-21 672
swiper概述
swiper3实现卡片效果banner
04-13
swiper3实现卡片效果banner
swiper凸显效果
03-16
swiper凸显效果，中间部分正常显示，其他部分显示为灰色。 技术点：DIV+CSS、jQ、swiper。
swiper-tfboys
06-05
swiper tfboys 源码资源 Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper...
前端必备swiper简单好用基本详解
07-06
swiper7基础轮播详解，最新添加的鼠标移到上面停止轮播，离开自动轮播。总的来说简单好用，前端必备
Swiper示例
12-04
Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
swiper-4.4.6
01-17
Web端和手机端双指缩放、左右滑动切换动画javascript插件
JS插件 ---- Swiper.js完整实例
05-26
Swiper.js完整实例，包括各种效果的demo以及引入jQuery否的各种js情况。
swiper-5.4.5
12-20
swiper-5.4.5
swiper插件
01-24
swiper 一款强大的轮播插件 支持触摸滑动事件
微信小程序最基本的组件swiper的使用
qq_44170622的博客
06-19 1898
学习微信小程序开发，最基本的便是轮播图的使用，当然微信官方给了最基本的组件的使用，swipe的使用，在我使用的时候，我发现也有很多的小坑，不过程序开发就是在Bug中不断成长 swiper插件的使用 swiper插件也就是轮播图，只不过我们在自己开发HTML的时候，我们一边下载别人的封装好的插件，不过在微信小程序后，我们官方文档给了一些配置，这使得我们通过配置某些参数，我们能够达到某些复杂插件的作用。 首先我们写入最基本的结构 <view > <swiper class="swiper"
Swiper插件的基本使用方法和案例
道阻且长，行则将至。
07-09 7004
Swiper插件的基本使用方法和案例 一、Swiper是什么？ Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 二、Swiper使用的步骤 步骤一、点我进入Swiper官网，下载Swiper animate 动画js和Swiper animate 动
swiper插件如何使用？
qq_57193827的博客
07-29 3574
js中swiper插件的使用
swiper的使用
jbf1111的博客
06-29 319
swiper
swiper onchange
最新发布
12-28
根据提供的引用内容，`swiper`组件的`onchange`事件是用来监听轮播图切换的事件。当轮播图切换时，可以通过该事件来执行相应的操作。 以下是一个示例代码，演示了如何使用`swiper`组件的`onchange`事件： ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白小白从不日白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值