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

- 日理万妓 2021-06-26 16:06 440阅读 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 条评论，440人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 swiper实现触摸滑动

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

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

相关 bootstrap和swiper的使用

Bootstrap下载地址：[http://www.bootcss.com/][http_www.bootcss.com] （响应式框架） Swiper 下载地址：[htt

迷南。/ 2022年06月08日 07:50/ 0 赞/ 504 阅读

相关左右滑动swiper

转自：http://blog.csdn.net/xieshunhai/article/details/72830938 .wxml <view class="sw

谁践踏了优雅/ 2022年06月01日 11:58/ 0 赞/ 325 阅读

相关 swiper的图册滑动效果

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

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

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

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

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

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

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

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

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

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

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