AnySlider:适用于任何Html内容的jQuery Slider插件

更新日期: 2019-09-08阅读: 2.2k标签: 插件

任何Slider都是一个易于使用且支持触摸的jquery插件,允许您为任何html内容创建可自定义的滑块,如图像,文本,视频等。


特征:

  • 重量轻,易于使用
  • 支持键盘导航
  • 使用淡入淡出或幻灯片过渡以及自定义缓动
  • 支持自动播放
  • 有很多选项可以自定义您自己的滑块


基本用法:

1.标记html结构

<div class="slider-wrapper"><font></font>
<div class="slider" id="slider"> <font></font>
<span> Content 1 </span><font></font>
<section> Content2 </section><font></font>
<div> Content 3</div><font></font>
</div><font></font>
</div>

2.在页面上包含jQuery库和jQuery AnySlider

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <font></font>
<script src="jquery.anyslider.js"></script>

3.包含缓动插件以缓解效果  

<script src="jquery.easing.1.3.js"></script>

4.包含jQuery AnySlider css来设置滑块的样式

<link rel="stylesheet" href="jquery-anyslider.css">

5.使用默认选项调用插件

$(document).ready(function () {<font></font>
$(‘#slider‘).AnySlider();<font></font>
});

6.所有默认选项。

  • afterChange: function () {}:每次幻灯片更改后调用的函数。 

  • afterSetup: function () {}:设置滑块后调用的函数。 

  • animation: ‘slide‘:滑动或褪色 

  • beforeChange: function () {}:每次幻灯片更改前调用的函数。 

  • easing: ‘swing‘:缓解选项。样式名称在jquery.easing.1.3.js里 

  • interval: 5000:每张幻灯片上暂停的毫秒数。将此选项设置为0将禁用自动播放。 

  • keyboard: true:允许使用向左和向右箭头键进行键盘导航。 

  • nextLabel: ‘Next slide‘:标签为下一个按钮。 

  • pauseonHover: true:在悬停时暂停自动播放 

  • prevLabel: ‘Previous slide‘:prev键的标签。 

  • reverse: false:启用自动播放时是否从右向左滑动而不是从左向右滑动。

  •  showBullets: true:是否显示导航子弹。将此设置为false将阻止子弹被绘制。 

  • showControls: true:显示/隐藏控件。将此设置为false将阻止控件的绘制。 

  • speed: 400:动画时间(以毫秒为单位)。将此选项设置为0将禁用动画。 

  • startSlide: 1:起始幻灯片的编号。 

  •  touch: true:是否启用在幻灯片之间滑动的功能。

  

链接: https://fly63.com/article/detial/5268

对于前端开发,整理推荐好用的chrome插件或应用

向web前端开发者整理提供的chrome插件或应用:比如Postman、JSON Viewer、Page Ruler 、ChromeADB 等等

使用原生js开发插件的实现方法

作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码

typeahead.js_jquery input 搜索自动补全jQuery插件

jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法,用于完成自动补全功能,能够完成绝大部分表单自动补全的需求。

js轮播插件_轮播图js代码插件总汇

这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等

ios风格的时间选择插件

在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子.插件依赖于better-scroll和vue

前端最常用的vscode插件集

在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集

浏览器插件_常用谷歌浏览器插件推荐

常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。

sublime安装插件

安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录,也可以安装package control组件,然后直接在线安装

BlockUI详细用法_Jquery中ajax加载提示插件blickUI

BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为

vue项目中vscode格式化配置和eslint配置冲突

使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!