Author: | ganlanyuan |
---|---|
Views Total: | 21,360 views |
Official Page: | Go to website |
Last Update: | October 27, 2020 |
License: | MIT |
Preview:

Description:
A tiny yet feature-rich content slider built using pure JavaScript and plain Html / CSS.
Inspired by OwlCarousel.
Features:
- Autoplay.
- Navigation and pagination.
- Infinite loop like a carousel.
- Gallery mode.
- Supports both directions.
- Responsive design.
- Multiple items in one slide.
- Custom animations.
- Keyboard navigation.
Basic usage:
Add the tiny-slider.css and tiny-slider.js to your webpages.
<link rel="stylesheet" href="assets/css/tiny-slider.css"> <script src="assets/js/tiny-slider.js"></script>
Add any HTML content to the slider as follows:
<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 tiny slider and done.
tns({container: '.container'});
Available options to customize the slider.
tns({ // parent container container: '.slider', // or 'gallery' mode: 'carousel', // or 'vertical' axis: 'horizontal', // number of items to display per slide items: 1, // space between slides gutter: 0, // space on the outside edgePadding: 0, // positive integer fixedWidth: false, // auto set the width autoWidth: false, // maximum viewport width for fixedWidth/autoWidth viewportMax: false, // how many slides to slide at a time slideBy: 1, // center the active slide center: false, // shows controls controls: true, // or 'bottom' controlsPosition: 'top', // custom prev/next text controlsText: ['prev', 'next'], // container to hold the controls controlsContainer: false, // shows prev/next buttons prevButton: false, nextButton: false, // shows nav dots nav: true, // or 'bottom' navPosition: 'top', // container to hold the nav dots navContainer: false, // uses thumbnails as nav dots navAsThumbnails: false, // shows navigation arrows arrowKeys: false, // animation speed speed: 300, // autoplay options autoplay: false, autoplayPosition: 'top', // or 'bottom' autoplayTimeout: 5000, autoplayDirection: 'forward', // or 'backward' autoplayText: ['start', 'stop'], autoplayHoverPause: false, autoplayButton: false, autoplayButtonOutput: true, autoplayResetOnVisibility: true, // animation options animateIn: 'tns-fadeIn', animateOut: 'tns-fadeOut', animateNormal: 'tns-normal', animateDelay: false, // infinite loop loop: true, // moves to the opposite edge when reaching the first or last slide. rewind: false, // auto set the height autoHeight: false, // an object containing breakpoints responsive: false, // enables lazy load lazyload: false, // CSS selector of images to lazy load lazyloadSelector: '.tns-lazy-img', // enables touch events touch: true, // enables mouse drag mouseDrag: false, // swipe or drag will not be triggered if the angle is not inside the range when set swipeAngle: 15, // define the relationship between nested sliders. // "inner" | "outer" | false nested: false, // prevents action when running preventActionWhenRunning: false, // prevents body scroll on touch device preventScrollOnTouch: false, // whether the slider will be frozen (controls, nav, autoplay and other functions will stop work) when all slides can be displayed in one page. freezable: true, // callback onInit: false, // saves browser capability variables to localStorage and without detecting them everytime the slider runs if set to true. useLocalStorage: true, // optional Nonce attribute for inline style tag to allow slider usage without `unsafe-inline Content Security Policy source. nonce: false });
API methods.
// get info slider.getInfo(); // goto a specific slide slider.goTo(2); slider.goTo('prev'); slider.goTo('next'); slider.goTo('first'); slider.goTo('last'); // play slider.play(); // pause slider.pause(); // update slider height slider.updateSliderHeight(); // destroy the instance slider.destroy();
Events.
slider.events.on('transitionStart', function (info, eventName) { console.log(info.event.type, info.container.id); }); slider.events.on('transitionEnd', function (info, eventName) { console.log(info.event.type, info.container.id); }); slider.events.on('indexChanged', function (info, eventName) { console.log(info.event.type, info.container.id); }); slider.events.on('newBreakpointStart', function (info, eventName) { console.log(info.event.type, info.container.id); }); slider.events.on('newBreakpointEnd', function (info, eventName) { console.log(info.event.type, info.container.id); }); slider.events.on('touchStart', function (info, eventName) { console.log(info.event.type, info.container.id); }); slider.events.on('touchMove', function (info, eventName) { console.log(info.event.type, info.container.id); }); slider.events.on('touchEnd', function (info, eventName) { console.log(info.event.type, info.container.id); }); slider.events.on('dragStart', function (info, eventName) { console.log(info.event.type, info.container.id); }); slider.events.on('dragMove', function (info, eventName) { console.log(info.event.type, info.container.id); }); slider.events.on('dragEnd', function (info, eventName) { console.log(info.event.type, info.container.id); });
Changelog:
v2.9.4 (10/27/2021)
- update critical devDependencies
v2.9.3 (07/28/2020)
- Added: add classname for cloned slides
- Added: Add nonce option (CSP)
- Improved: Use epsilon insted of foFixed
- Fixed: Fix console error ‘Cannot read property ‘appendChild’ of null’
- Fixed: Check image.complete in case image has been already loaded
- Fixed: Check if event is cancelable before calling preventDefault
- Fixed: Adds type=”button” to all elements, preventing the default functionality of submit which mainly effects .NET Webform sites.
- Fixed: Issue with destroying slides with no nav container
- Fixed: Fix an issue with responsiveness when page is resized below a breakpoint
- Fixed: Fix an issue with lazyloadSelector
- Fixed: Dots nav doesn’t display on resize if the page is loaded first on viewport where slider is disabled
- Fixed: Fix mediaquerySupport helper
- Fixed: Fix style checking with autoWidth slider when only 1 item is present
- Fixed: Fix getIndexMax() for autoWidth
v2.9.2 (05/07/2020)
- Bugs fixed
v2.9.0 (12/14/2018)
- update tests, fix a lazyload image issue, fix a transitionduration issue in IE
v2.8.8 (12/08/2018)
- use static nav
- fix getVisibleSlideRange()
- fix autoHeight in edge
- fix nav number
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
Can anyone please tell me if its possible to have 2 items?
Getting a:
“items are not enough to show on 1 page” error
Gutters don’t work (
I am unable to make this slider work. I tried 15 times. The working sample has too many pages with too much code – tl;dr. Simple instructions don’t work.