未加星标

Tiny Content Slider with Pure JavaScript

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏
Preview:
Tiny Content Slider with Pure JavaScript
Description:

A tiny yet feature-rich content slider built using pure javascript and plain Html / CSS.

Features: Autoplay. Navigation and pagination. Infinite loop like a carousel. Responsivedesign. Multiple items in one slide. Custom animations. Keyboard navigation. Basic usage:

Add thetiny-slider.css andtiny-slider.js to your webpages.

<link rel="stylesheet" href="assets/css/tiny-slider.css"> <script src="assets/js/tiny-slider.js"></script>

Add html content to the slider.

<div class="container"> <div class="slider"> <div> <p>Slide 1</p> </div> <div> <p>Slide 2</p> </div> <div> <p>Slide 3</p> </div> </div> </div>

Initialize the slider.

tns({container: '.container'});

Available customization options.

tns({ container: '.slider', mode: 'carousel', // or 'gallery' axis: 'horizontal', // or 'vertical' items: 1, gutter: 0, edgePadding: 0, fixedWidth: false, slideBy: 1, controls: true, controlsText: ['prev', 'next'], controlsContainer: false, nav: true, navContainer: false, navAsThumbnails: false, arrowKeys: false, speed: 300, autoplay: false, autoplayTimeout: 5000, autoplayDirection: 'forward', autoplayText: ['start', 'stop'], autoplayHoverPause: false, autoplayButton: false, autoplayButtonOutput: true, autoplayResetOnVisibility: true, loop: true, rewind: false, autoHeight: false, responsive: false, lazyload: false, touch: true, mouseDrag: false, swipeAngle: 15, nested: false, freezable: true, onInit: false }); Changelog:

v2.8.7 (11/10/2018)

fix(api): Correct .x()/.xs() to work properly;vertical: fix slides width in some old browsers

v2.8.6 (09/08/2018)

update isVisible()

v2.8.5 (08/18/2018)

add tag “article” as slide

v2.8.4 (08/12/2018)

vertical mode: fix an issue in initialization

v2.8.3 (08/04/2018)

update

v2.8.2 (07/21/2018)

rm removeElementStyles.js, fix some “disable” related issues in resizeTasks()

v2.8.1 (07/14/2018)

update

v2.7.4 (07/08/2018)

update vertical slider classes

v2.7.3 (06/30/2018)

gallery: fix page overlapping when click nav, fix getImageArray() and getMaxSlideHeight() fix an issue in navInit

v2.7.3 (06/24/2018)

gallery: fix page overlapping when click nav, fix getImageArray() and getMaxSlideHeight()

v2.7.2 (06/17/2018)

update has3D.js so that it can run in <head>

v2.7.1 (06/09/2018)

gallery mode: prevent touching/draging

v2.7.0 (06/02/2018)

gallery mode: prevent touching/draging

v2.6.0 (05/30/2018)

update touch variables

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Tiny Content Slider with Pure JavaScript
本站链接:https://www.codesec.net/view/611886.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(11)