swiper Scrollbar滚动条组件详解

本文实例为大家分享了swiper Scrollbar滚动条组件的具体代码，供大家参考，具体内容如下

1、scrollbar

为Swiper增加滚动条。类型：object。

2、el

scrollbar容器的css选择器或HTML元素。类型：string/HTML Element，默认：.swiper-scrollbar。

3、hide

滚动条是否自动隐藏。类型：boolean，默认：true(会自动隐藏)，false(不会自动隐藏)。

4、draggable

设置为true时允许拖动滚动条。类型：boolean，默认：false。

5、snapOnRelease

设置为false，释放滚动条时slide不会自动切合。类型：boolean，默认：true。

6、dragSize

设置滚动条指示尺寸。默认：auto自动，或者设置为num(px)。类型：string/number。

<script>
var mySwiper = new Swiper('.swiper-container',{
 scrollbar: {
  el: '.swiper-scrollbar',
  hide: true,
  draggable: false,
  snapOnRelease: true,
  dragSize: 20,
 }
})
</script>

7、mySwiper.scrollbar.el

获取滚动条的HTML元素，还可以通过$el获取DOM7。

8、mySwiper.scrollbar.dragEl

获取滚动条指示条的HTML元素，还可通过$dragEl获取DOM7。

9、mySwiper.scrollbar.updateSize()

更新滚动条。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>swiper-scrollbar滚动条组件</title>
 <link rel="stylesheet" href="css/swiper.min.css" >
 <style>
 .swiper-container{
  width: 500px;
  height: 214px;
  margin-bottom: 10px;
 }
 .swiper-slide{
  text-align: center;
  line-height: 214px;
  font-size: 80px;
  color: #fff;
 }
 </style>
</head>

<body>
 <div class="swiper-container">
 <div class="swiper-wrapper">
  <div class="swiper-slide" style="background: #FF8604">slide1</div>
  <div class="swiper-slide" style="background: #4390EE">slide2</div>
  <div class="swiper-slide" style="background: #CA4040">slide3</div>
 </div>
 <div class="swiper-scrollbar"></div>
 </div>

 <script src="js/swiper.min.js"></script>
 <script>
 var mySwiper = new Swiper('.swiper-container',{
  scrollbar: {
  el: '.swiper-scrollbar',
  hide: true,
  draggable: false,
  snapOnRelease: true,
  dragSize: 20,
  }
 })
 mySwiper.scrollbar.$el.css('height','6px');
 mySwiper.scrollbar.$dragEl.css('background','#fff');
 mySwiper.scrollbar.updateSize();
 </script>

</body>
</html>

注：swiper.min.css，swiper.min.js文件直接上Swiper官网下载。

参考Swiper API文档

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例

    微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例

    本文实例讲述了微信小程序实现swiper切换卡内嵌滚动条不显示的方法.分享给大家供大家参考,具体如下: index.wxml文件: <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">为你推荐</view&g

  • swiper Scrollbar滚动条组件详解

    swiper Scrollbar滚动条组件详解

    本文实例为大家分享了swiper Scrollbar滚动条组件的具体代码,供大家参考,具体内容如下 1.scrollbar 为Swiper增加滚动条.类型:object. 2.el scrollbar容器的css选择器或HTML元素.类型:string/HTML Element,默认:.swiper-scrollbar. 3.hide 滚动条是否自动隐藏.类型:boolean,默认:true(会自动隐藏),false(不会自动隐藏). 4.draggable 设置为true时允许拖动滚动条.类型

  • Angular2入门教程之模块和组件详解

    Angular2入门教程之模块和组件详解

    本文呢主要给大家介绍的关于Angular2模块和组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.初步了解模块和组件 之前给大家介绍了构建工程,这篇文章简单讲述一下Angular2中的模块和组件. app文件夹下有五个文件,其中,app.component.spec.ts应该是和模块测试有关的文件,目前不用管它.剩下的四个文件就是典型的模块+组件的文件组成模式. Angular2应用由模块和组件构成,每个模块这样明明name.module.ts,组件则是name.compo

  • 基于Vue单文件组件详解

    基于Vue单文件组件详解

    本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图.但当在更复杂的项目中,或者前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显: 1.全局定义 (Global definitions) 强制要求每个 compon

  • OpenStack 中的Nova组件详解

    Open Stack Compute Infrastructure (Nova) Nova是OpenStack云中的计算组织控制器.支持OpenStack云中实例(instances)生命周期的所有活动都由Nova处理.这样使得Nova成为一个负责管理计算资源.网络.认证.所需可扩展性的平台.但是,Nova自身并没有提供任何虚拟化能力,相反它使用libvirt API来与被支持的Hypervisors交互.Nova 通过一个与Amazon Web Services(AWS)EC2 API兼容的w

  • 微信小程序 WXDropDownMenu组件详解及实例代码

    微信小程序 WXDropDownMenu组件详解及实例代码

    微信小程序 WXDropDownMenu组件详解,这里给个小的示例,帮助大家学习理解, 功能: 适用于商品列表筛选与功能菜单跳转 先来看下效果图: 思路与步骤: 布局方面,整体使用dl来写,二级包在dd中,用ul li来写:交互方面,点击某一级菜单,关闭兄弟子菜单,点击某子菜单关闭所有菜单. 1.使用dt做出第一级菜单 2.使用dd嵌套第二级菜单,初始隐藏.position为absolute,使用z-index浮出页面层 /*总菜单容器*/ .menu { display: block; hei

  • 基于Django的ModelForm组件(详解)

    创建类 from django.forms import ModelForm from django.forms import widgets as wd from app01 import models class 类名(ModelForm): class Meta: model = models.表名 #models中的表名 fields="__all__", # 字段 exclude=None, # 排除字段 widgets=None, # 自定义插件 error_message

  • vue设计一个倒计时秒杀的组件详解

    简介: 倒计时秒杀组件在电商网站中层出不穷  不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的 核心思路: 1.时间不能是本地客户端的时间  必须是服务器的时间这里用一个settimeout代替 以为时间必须统一 2.开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内  参加活动按钮可以点击,并且参加过活动以后不能再参加, 3.在组件创建的时候 同步得到现在时间服务时间差,并且在这里边设置定时器,每秒都做判断看秒杀是否开始和结束, 4.在更新时间的函数中是

  • vue组件详解之使用slot分发内容

    vue组件详解之使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-footer> </app> 当需要让组件组合使用,混合父组件的内容与子组件的模板时,就会用到slot , 这个过程叫作内容分发( transclusion ). 注意两点: 1.< app>组件不知道它的挂载点会有什么内容.挂载点的内容是由<app >

  • SpringMVC的执行流程及组件详解

    这篇文章主要介绍了SpringMVC的执行流程及组件详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.核心模块 数据库访问技术与集成:JDBC.XML等 Web与远程调用技术:SpringMVC.WebServlet.WebSocket等 面向切面编程:AOP 基础设施:Tomcat Spring核心容器:Beans.Core.Context.Expression.ContestSupport 测试:Test 二.执行流程 1.用户通过页

  • OpenStack的Swift组件详解

    OpenStack的Swift组件详解

    一:简介 背景 1.Swift 最初是由 Rackspace 公司开发的高可用分布式对象存储服务(Object Storage Service),并于 2010 年贡献给 OpenStack 开源社区作为其最初的核心子项目之一,为其 Nova 子项目提供虚机镜像存储服务.Swift 构筑在比较便宜的标准硬件存储基础设施之上,无需采用 RAID(磁盘冗余阵列),通过在软件层面引入一致性散列技术和数据冗余性,牺牲一定程度的数据一致性来达到高可用性和可伸缩性,支持多租户模式.容器和对象读写操作,适合解

随机推荐