运用swiper框架快速实现网页当中的轮播效果

已于 2022-06-05 18:49:17 修改
阅读量1.5k 收藏 5
点赞数
分类专栏： 前端 文章标签： css3 css javascript 前端
于 2022-06-05 17:27:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60483918/article/details/125133640
版权

为什么要采用swiper框架来实现呢？

swiper相比于bootstrap等其他框架来说，操作难度更低，功能也较齐全，初学者容易上手

 因为是要外部链接到swiper的css和js文件，所以需要在官网打包下载他们的源码文件，下面提供了swiper官网的链接，要记得修改文件的位置。

swiper的官网链接https://swiper.com.cn/

（1）自动切换的轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../dist/css/swiper.min.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-container {
        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;
    }
    </style>
</head>
<body>
    <!-- Swiper -->
    <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 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 class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });
    </script>
</body>
</html>

（2）键鼠控制(在新窗口打开)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../dist/css/swiper.min.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-container {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .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;
    }
    </style>
</head>
<body>
    <!-- Swiper -->
    <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 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 class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        keyboardControl: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
    });
    </script>
</body>
</html>

 （3）鼠标控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../dist/css/swiper.min.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-container {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .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;
    }
    </style>
</head>
<body>
    <!-- Swiper -->
    <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 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 class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        direction: 'vertical',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        mousewheelControl: true
    });
    </script>
</body>
</html>

（4）滚动条 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../dist/css/swiper.min.css">

    <!-- Demo styles -->
    <style>
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 300px;
        margin: 20px auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        width: 250px;

        /* 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;
    }
    </style>
</head>
<body>
    <!-- Swiper -->
    <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 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 class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Scrollbar -->
        <div class="swiper-scrollbar"></div>
    </div>

    <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        scrollbar: '.swiper-scrollbar',
        scrollbarHide: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 30,
        grabCursor: true
    });
    </script>
</body>
</html>

（5）在Slides之间产生间隙  


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../dist/css/swiper.min.css">

    <!-- Demo styles -->
    <style>
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 500px;
        height: 300px;
        margin: 20px auto;
    }
    .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;
    }
    </style>
</head>
<body>
    <!-- Swiper -->
    <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 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 class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 30,
    });
    </script>
</body>
</html>

需要修改的部分：

要给图片设置统一的大小，不设置的话轮播的时候图片大小不一。建议采用高清的图片，在设置图片的宽高之后，画质与原来相比会下降，使用高清图片，视差不会那么明显。

       <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/banner1.jpg" width="100%;" height="630"></div>
                <div class="swiper-slide"><img src="img/banner2.jpg" width="100%;" height="630"></div>
                <div class="swiper-slide"><img src="img/banner3.jpg" width="100%;" height="630"></div>
                <div class="swiper-slide"><img src="img/banner4.jpg" width="100%;" height="630"></div>

            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

一些常用的轮播样式就讲到这里了，想了解或学习更多，可以打开官网查看相应的api文档或者demo。

十一月的肖邦689
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用swiper实现图片轮播功能
weixin_42551921的博客
08-05 329
需要用到的文件有swiper-bundle.js和swiper-bundle.css文件，还需要引入map文件，不然会有警告提示；官网介绍：Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。先将图片放到指定文件夹，然后新建js文件，记录图片位置；将记录存放在数组中，方便后续使用；下载指定版本的swiper文件；//可选选项，自动滑动。/* 相对定位 */
swiper小程序自定义轮播类旋转木马
08-10
在微信小程序开发中，Swiper组件常用于实现轮播图效果，它提供了基本的滑动切换功能，但有时为了满足更复杂的需求，如自定义指示器、动态加载内容或者交互特效，开发者可能需要进行自定义轮播类旋转木马的实现。...
使用 swiper 做轮播图
17 的博客
02-09 7421
虽然我是一个喜欢造轮子的人，但是对于 swiper，我还是直接拿过来用了，功能很多，也很方便。本文介绍一些常用的功能。
【web网页开发制作】Html+Css+Js游戏主题特效及轮播效果网页作业天涯明月刀（7页面附源码）
最新发布
赏樱看雪撸代码
05-14 1029
游戏主题网页制作，html网页轮播效果，鼠标移入移出点击特效，js实现幻灯片，html+css+js游戏网页设计与制作，web网页开发游戏主题含表单，DIV+CSS网页制作，天涯明月刀游戏主题网页制作，期末网页大作业，网页作业成品，web前端源码实例，如何制作网页，网页设计思路，如何从零开始制作web页面。
Swiper 插件实现轮播图
m0_62508027的博客
05-14 2043
使用swiper实现轮播图效果
使用swiper实现轮播图
m0_62676426的博客
10-07 2062
在使用swiper之前需要先引入需要的css和js文件，可以直接下载文件也可以选择使用CDN。在本文中我选择CDN的方式，首先在html文件中导入css和js。到这一步，一个简单的轮播图就完成了。创建div，放入需要轮播的内容。
swiper轮播图插件的使用
2301_76911816的博客
05-20 795
swiper的引入和基本使用入门级教学
swiper的基础使用
weixin_33872660的博客
06-15 137
当然事先不要忘记引用下载好的框架文件。这一章我们添加了设置容器的宽、高<!doctype html><html> <head> <title>在slide之间加上间隙</title> <meta charset="utf-8"> <link rel="...
Swiper官网TFBOYS案例源码
05-27
Swiper是一款广泛应用于网页端的触摸滑动插件，尤其在移动端UI设计中，它扮演着重要的角色。...在实践中，结合Swiper与其他前端框架（如React、Vue、Angular等）进行整合，可以构建出更加高效且互动性强的网页应用。
轮播图片的实现源码
05-28
这些库提供了丰富的选项和API，方便快速实现各种复杂的轮播效果。 综上所述，轮播图片的实现涉及到HTML、CSS和JavaScript的综合运用，同时也需要注意用户体验和自适应设计。通过深入理解这些技术，你可以根据项目...
Swiper简单使用,供学生学习，新手，初级观看
06-15
Swiper是一款广泛应用于网页开发中的触摸滑动框架，尤其在创建响应式布局和移动设备上的滑动效果时，Swiper的使用非常普遍。...通过不断实践和尝试，相信你很快就能熟练运用Swiper来提升你的网页设计水平。
chrome标签页自动轮播
11-15
Chrome浏览器标签页之间的自动切换，解压后，通过扩展程序 加载已解压的扩展程序添加。之后右上角有插件图标，可以设置轮播秒数，点击开始结束按钮控制轮播
WebSinglePageApp:利用swiper.js框架制作的手机单页滑动轻应用，主要利用CSS3的帧动画
06-20
在这个项目中，开发者使用了swiper.js框架来构建这样的应用，这是一个强大的触摸滑动js库，特别适合于创建全屏滚动、幻灯片、轮播图等交互式内容。 Swiper.js框架具有以下关键特性： 1. **触摸滑动支持**：Swiper....
4.Vue使用swiper实现轮播图基础教程
qq_57676486的博客
07-05 423
引入轮播图、常见的业务和项目都有大部分的第三方第三方库：常见的功能及模块都有人写过了，你会引入实现功能。
swiper-轮播图使用教程
qq_54054566的博客
04-08 5050
Swiper 使用方法 1.首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。 <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="dist/css/swiper-bundle.min.css"> </head&g
微信小程序开发教程：项目五导航组件 课后习题
WHT869706733的博客
04-03 3736
《微信小程序开发教程》主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一、单选题 二、多选题 三、判断题 四、填空题 五、简答题 简述如何动态设置窗口的背景色。 六、编程题 1.设计一款模拟“豆瓣电影”的小程序，要求能实现“顶部标签切换效果、海报轮播效果、列表方式布局、电影详情页布局”等功能。 2.请简单创建一个页面结构，要求页面结构根据不同屏幕手机大小进行自适应。 一、单选题 1.在Escroll--ve组件中，通过（B）属性设置哪个方向可滚动，则在那个方向滚动到该元素。
轮播图swiper框架的基本使用
m0_62360527的博客
10-15 1967
Swiper常用于移动端网站的内容触摸滑动Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！Swiper 的特色功能不依赖公共库Swiper无需加载任何公共库（如jquery）即可运行，这保证了Swiper的轻量和运行速度。
vue中使用swiper插件实现轮播图
前端开发工程师
01-11 4759
轮播图数据是通过异步请求从服务器获取的，通过 v-for 渲染在轮播图页面结构中。此时需要注意的是：需要等轮播图页面结构渲染数据完成后，这时实例化swiper实例，轮播图的动态效果才生效。以下是实现步骤。 一、在项目中安装swiper插件 cnpm install --save swiper@5 安装版本5的swiper 二、在轮播图组件中引入swiper的js文件和css文件 import Swiper from 'swiper' import 'swiper/css/...
在同一个页面中多次使用swiper 轮播插件，要避免相互影响
热门推荐
cvper's world !
06-18 1万+
在项目中使用轮播是很常见的，swiper 就是其中之一，pc 端，移动端都可以使用，效果还是不错的；曾经在写一个页面的时候，其中有两个轮播图，于是都用swiper 来写了，写完之后发现显示的效果不是预期的效果，有很大的问题；后来检查发现两个轮播图相互影响了，样式啥的冲突了，因为我没有单独的给container或者slide 起类名，所以样式相互冲突了；现在总结一下在同一个页面中使用多个 swipe...
swiper.css实现轮播代码
06-01
好的，以下是使用 swiper.css 实现轮播的代码示例： 首先，我们需要在 HTML 中引入 Swiper 的 CSS 和 JS 文件。可以在 head 标签中添加以下代码： ```html <!-- 引入 Swiper CSS 文件 --> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

十一月的肖邦689

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

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

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

打赏作者

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

抵扣说明：

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

余额充值