Bootstrap 使用 Swiper 4.x 实现手机滑动效果(带简单例子)

- 日理万妓 2021-06-26 16:06 460阅读 0赞

Swiper 使用教程：[http://www.swiper.com.cn/usage/][http_www.swiper.com.cn_usage]

Swiper 效果演示链接：[http://www.swiper.com.cn/demo/index.html][http_www.swiper.com.cn_demo_index.html]

Swiper 下载链接：[http://www.swiper.com.cn/download/index.html\#file1][http_www.swiper.com.cn_download_index.html_file1]

简单的使用例子：

（相关css与js文件自己下载导入）

<link rel="stylesheet" href="./dist/css/swiper.min.css">

<script src="./dist/js/swiper.min.js"></script>

<body>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="images/1.jpg" alt=""></div>
          <div class="swiper-slide"><img src="images/2.jpg" alt=""></div>
          <div class="swiper-slide"><img src="images/3.jpg" alt=""></div>
          <div class="swiper-slide"><img src="images/4.jpg" alt=""></div>
        </div>
      </div>
      <script>
        var swiper = new Swiper('.swiper-container',{
        	autoplay:true //设置自动滚动
        });
      </script>
    </body>

[http_www.swiper.com.cn_usage]: http://www.swiper.com.cn/usage/
[http_www.swiper.com.cn_demo_index.html]: http://www.swiper.com.cn/demo/index.html
[http_www.swiper.com.cn_download_index.html_file1]: http://www.swiper.com.cn/download/index.html#file1

发表评论取消回复

表情：

评论列表（有 0 条评论，460人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5移动端轮播滑动效果（swiper实现）

天开发的项目有个页面需要做一个轮播图效果，我也在网上找了插件，最后通的是swiper插件，和移动端开发比较匹配，官网地址：[https://www.swiper.com....

ゞ浴缸里的玫瑰/ 2024年04月17日 16:17/ 0 赞/ 91 阅读

相关使用jQuery实现滑动效果

jQuery是一种流行的JavaScript库，提供了简化DOM操作和事件处理的功能。在jQuery中，可以使用各种方法来实现滑动效果，包括滑动显示、滑动隐藏、滑动切换等。以下

深藏阁楼爱情的钟/ 2024年02月28日 04:08/ 0 赞/ 2 阅读

相关 Swiper5手机触摸滑动插件快速使用

Swiper插件官网 https://www.swiper.com.cn/ 1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min

叁歲伎倆/ 2023年06月24日 09:25/ 0 赞/ 41 阅读

相关 html实现轮播手机滑动,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）

swiper是一款免费以及轻量级轮播滑动的js框架，适用于PC端跟移动端，官方地址：(https://www.swiper.com.cn/) 效果演示： PC端： ![d

以你之姓@/ 2022年10月06日 10:52/ 0 赞/ 307 阅读

相关手机端图片左右滑动效果实现

起初我想尝试用jQuery Mobile的swipeleft和swiperight,可以实现手势左右滑动的效果，但是jQuery Mobile对页面的其它部分影响很大，所以不得

Dear 丶/ 2022年08月20日 02:16/ 0 赞/ 288 阅读

相关 swiper实现触摸滑动

引入需要的文件 <link href="css/swiper.min.css" rel="stylesheet" type="text/css"

骑猪看日落/ 2022年08月05日 02:43/ 0 赞/ 306 阅读

相关 swiper的图册滑动效果

首先，我们要做的效果是这样子的！！~~ ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

柔情只为你懂/ 2022年04月04日 12:25/ 0 赞/ 453 阅读

相关 swiper 立体3D相册滑动效果

<link rel="stylesheet" type="text/css" href="https://www.swiper.com.cn/dist/css/swip

我就是我/ 2022年04月04日 11:47/ 0 赞/ 701 阅读

相关 Bootstrap 使用 Swiper 4.x 实现手机滑动效果(带简单例子)

Swiper 使用教程：[http://www.swiper.com.cn/usage/][http_www.swiper.com.cn_usage] Swiper 效果演示

- 日理万妓/ 2021年06月26日 16:06/ 0 赞/ 461 阅读

相关 uni-app 通过 swiper 实现卡片滑动背景同步切换效果

我们在开发旅游专题前端时，经常会遇到需要实现飞猪或携程里面的卡片滑动背景同步切换效果。uni-app 通过 swiper 组件也可以实现类似效果，如下图：

朱雀/ 2021年03月30日 11:06/ 0 赞/ 1622 阅读