Swiper 4.x 使用方法(移动端网站的内容触摸滑动)

Swiper常用于移动端网站的内容触摸滑动

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

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

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

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。

<!DOCTYPE html>
<html>
<head>
  ...
  <link rel="stylesheet" href="path/to/swiper.min.css" rel="external nofollow" >
</head>
<body>
  ...
  <script src="path/to/swiper.min.js"></script>
</body>
</html>

2.HTML内容。

<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>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>

  <!-- 如果需要导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- 如果需要滚动条 -->
  <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {
  width: 600px;
  height: 300px;
}

4.初始化Swiper：最好是挨着</body>标签

<script>
 var mySwiper = new Swiper ('.swiper-container', {
  direction: 'vertical',
  loop: true,

  // 如果需要分页器
  pagination: {
   el: '.swiper-pagination',
  },

  // 如果需要前进后退按钮
  navigation: {
   nextEl: '.swiper-button-next',
   prevEl: '.swiper-button-prev',
  },

  // 如果需要滚动条
  scrollbar: {
   el: '.swiper-scrollbar',
  },
 })
 </script>
</body>

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化（不推荐）。

<script type="text/javascript">
window.onload = function() {
 ...
}
</script>

或者这样（Jquery和Zepto）

<script type="text/javascript">
$(document).ready(function () {
 ...
})
</script>

5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。

赞 (0)

相关推荐

  • Swiper.js实现移动端元素左右滑动

    swiper.js也是一个很好用的移动端的js库. 需要引入它的css文件和js文件.用法很简单,加入相应的类即可,看一下Demo,很容易看懂. 我的例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport

  • 移动端触摸滑动插件swiper使用方法详解

    Swiper是移动端的一款非常强大的触摸滑动插件,下面代码只展示一些常用的配置,具体可以查看官网api <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper.min.cs

  • swiper4实现移动端导航切换

    swiper4实现移动端导航切换

    本文实例为大家分享了swiper4实现移动端导航切换的具体代码,供大家参考,具体内容如下 首先导入 <link rel="stylesheet" href="css/swiper.min.css" rel="external nofollow" rel="external nofollow" > <script src="js/jquery-1.10.1.min.js"></s

  • 移动端滑动切换组件封装 vue-swiper-router实例详解

    移动端滑动切换组件封装 vue-swiper-router实例详解

    具体代码如下所述: <strong>组件部分</strong> <template> <div class="main"> <div class="page-tab"> <div :class="nowPath == item.path ? 'tab-item tab-item_active' : 'tab-item'" v-for='(item, index) in tabLis

  • Swiper 4.x 使用方法(移动端网站的内容触摸滑动)

    Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件.可下载Swiper文件或使用CDN. <!DOCTYPE html> <html> <head&g

  • swiper自定义分页器使用方法详解

    本文实例为大家分享了swiper自定义分页器使用的具体代码,供大家参考,具体内容如下 解决问题:不想使用swiper的自带的圆钮式的分页器,想使用自定义的分页器. 解决方案:利用swiper提供的paginationCustomRender()方法(自定义特殊类型分页器,当分页器类型设置为自定义时可用.) 下面的代码可以直接赋值粘贴到html文件里面然后作为项目在浏览器打开,但是图片需要你引用自己的本地图片并设置好路径,否则你是看不到轮播图片的.代码如下(参考注释很重要): <!DOCTYPE

  • Nginx记录分析响应慢的请求及替换网站响应内容的配置

    Nginx记录分析响应慢的请求及替换网站响应内容的配置

    nginx记录分析网站响应慢的请求(ngx_http_log_request_speed) nginx模块ngx_http_log_request_speed可以用来找出网站哪些请求很慢,针对站点很多,文件以及请求很多想找出哪些请求比较慢的话,这个插件非常有效.作者的初衷是写给自己用的,用来找出站点中处理时间较长的请求, 这些请求是造成服务器高负载的很大根源. 日志记录之后,在使用perl脚本分析日志,即可知道哪些请求需要修正. 1. 模块安装 nginx第三方模块安装方法这里就一笔略过了. 配

  • thinkphp 抓取网站的内容并且保存到本地的实例详解

    thinkphp 抓取网站的内容并且保存到本地的实例详解

    thinkphp 抓取网站的内容并且保存到本地的实例详解 我需要写这么一个例子,到电子课本网下载一本电子书. 电子课本网的电子书,是把书的每一页当成一个图片,然后一本书就是有很多张图片,我需要批量的进行下载图片操作. 下面是代码部分: public function download() { $http = new \Org\Net\Http(); $url_pref = "http://www.dzkbw.com/books/rjb/dili/xc7s/"; $localUrl =

  • jQuery使用prepend()方法在元素前添加内容用法实例

    本文实例讲述了jQuery使用prepend()方法在元素前添加内容的用法.分享给大家供大家参考.具体分析如下: 下面的代码可实现在文本前和列表前添加新的元素 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1"

  • vue移动端判断手指在屏幕滑动方向

    vue移动端判断手指在屏幕滑动方向

    vue移动端判断手指在屏幕滑动方向,供大家参考,具体内容如下 可以据此实现手指滑屏切换tab的功能,例如京东的订单页,这几个tab切换就可以利用这个实现 页面 <div @touchstart="handleTouchstart" @touchend="handleTouchend" class="slotWrap" > //屏幕滑动 //手指按下屏幕 handleTouchstart(event){ this.startTime =

  • 表单提交错误后返回内容消失问题的解决方法（PHP网站）

    表单提交错误后返回内容消失怎么办呐,今天就来分析解决一下这个问题. 状况概述: 做填写表单信息提交的时候会碰到一个问题就是当用户填写并提交表单后,程序判断不符合要求并返回,返回之后之前填写的表单信息会被清空了的情况.如果填写的信息量少还无所谓,如果填写的信息量比较多,这会直接打击到填写信息的人的良好心情.因此解决表单提交错误返回后填写的内容消失的问题是一个提高用户体验度的迫在眉睫的问题. 对于这种问题,综合总结了大概有下面几种情况: (1)页面使用了session_start函数,这个函数有个特

  • 移动端jQuery修正Web页面滑动时div问题的两则实例

    移动端jQuery修正Web页面滑动时div问题的两则实例

    顶部固定时划屏出现闪动 头部是一个普通的div,高度是48,头部下面有个固定的banner,手下滑的时候,banner会固定在浏览器最顶部不动.出现的问题是,PC端是好的,手机浏览器向上滑动的时候出现闪动!影响用户体验. 解决方法一: 之前的做法: if ($(window).scrollTop() < 48) { $(".nav ").css("top", 48 - parseInt($(window).scrollTop())); }else{ $(&qu

  • jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5;border:1px #ddd solid;padding:1px;}</style><div id="bg" v-c

随机推荐