Tiny slider for all purposes, inspired by Owl Carousel.
Demos
Tests
Can be tested on Firefox 12+, Chrome 15+, Safari 4+, Opera 12.1+, IE8+.
Note: some features may need a manual test.
+ What's new
+ Features
+ Install
+ Usage
+ Options
+ Responsive options
+ Methods
+ Custom Events
+ Fallback
+ Browser Support
+ Support
+ License
- Using
%instead ofpx(No more recalculation of each slide width on window resize) - Using CSS Mediaqueries if supported
- Save browser capbility values to localStorage, so they will not be recheck again until browser get upgraded or user clear the localStorage manuelly.
- More options available for
responsive. (Start from v2.1.0, issue 53) - Insert
controlsandnavbefore slider instead of after (issue 4) - Move
autoplaybutton out ofnavcontainer. (Start from v2.1.0) - Some selector changes in
tiny-slider.scss
Migrating to v2
- Update
controlsand / ornavstyles based on their position changes. - Update the
slider selectorsaccordingly if used in your CSS or JS. - Update styles related to
autoplaybutton.
- carousel / gallery
- responsive
- fixed width
- vertical slider
- gutter
- edge padding (center)
- loop
- rewind (pull 10)
- slide by
- customize controls / nav
- lazyload
- autoplay
- auto height
- touch support
- mouse drag (pull 32)
- arrow keys
- accessibility for people using keyboard navigation or screen readers (issue 4)
- response to visibility changing (pull 19)
- custom events
- nested slider
bower install tiny-slider or npm install tiny-slider
via cdnjs:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.5.0/tiny-slider.css">
<!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.5.0/min/tiny-slider.helper.ie8.js"></script><![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.5.0/min/tiny-slider.js"></script>
<!-- NOTE: from v2.2.1 tiny-slider.js is no longer required to be in <body> -->Or import it via webpack or rollup:
// yourScript.js
import { tns } from "path/to/tiny-slider/src/tiny-slider.module.js"<div class="my-slider">
<div></div>
<div></div>
<div></div>
</div>
<!-- or ul.my-slider > li --><script>
var slider = tns({
container: '.my-slider',
items: 3,
slideBy: 'page',
autoplay: true
});
// NOTE:
// prior to v2.0.2, options "container", "controlsContainer", "navContainer" and "autoplayButton" still need to be DOM elements.
// e.g. container: document.querySelector('.my-slider'),
</script>| Option | Type | Description |
|---|---|---|
container |
Node | String | Default: document.querySelector('.slider'). The slider container element or selector. |
mode |
'carousel' | 'gallery' |
Default: 'carousel'. Controls animation behaviour. With carousel everything slides to the side, while gallery uses fade animations and changes all slides at once. |
axis |
'horizontal' | 'vertical' |
Default: horizontal. The axis of the slider. |
items |
Integer | Default: 1. Number of slides being displayed in the viewport. |
gutter |
Integer | Default: 0. Space between slides (in "px"). |
edgePadding |
Integer | Default: 0. Space on the outside (in "px"). |
fixedWidth |
Integer | false | Default: false. Controls width attribute of the slides. |
slideBy |
Integer | 'page' |
Default: 1. Number of slides going on one "click". |
controls |
Boolean | Default: true. Controls the display and functionalities of controls components (prev/next buttons). If true, display the controls and add all functionalities. |
controlsText |
(Text | Markup) Array | Default: ['prev', 'next']. Text or markup in the prev/next buttons. |
controlsContainer |
Node | String | false |
Default: false. The container element/selector around the prev/next buttons. controlsContainer must have at least 2 child elements. |
nav |
Boolean | Default: true. Controls the display and functionalities of nav components (dots). If true, display the nav and add all functionalities. |
navContainer |
Node | String | false |
Default: false. The container element/selector around the dots. navContainer must have at least same number of children as the slides. |
navAsThumbnails |
Boolean | Default: false. Indecate if the dots are thurbnails. If true, they will always be visible even when more than 1 slides displayed in the viewport. |
arrowKeys |
Boolean | Default: false. Allows using arrow keys to switch slides. |
speed |
Integer | Default: 300. Speed of the slide animation (in "ms"). |
autoplay |
Boolean | Default: false. Toggles the automatic change of slides. |
autoplayTimeout |
Integer | Default: 5000. Time between 2 autoplay slides change (in "ms"). |
autoplayDirection |
'forward' | 'backward' |
Default: 'forward'. Direction of slide movement (ascending/descending the slide index). |
autoplayText |
Array (Text | Markup) | Default: ['start', 'stop']. Text or markup in the autoplay start/stop button. |
autoplayHoverPause |
Boolean | Default: false. Stops sliding on mouseover. |
autoplayButton |
Node | String | false |
Default: false. The customized autoplay start/stop button or selector. |
autoplayButtonOutput |
Boolean | Default: true. Output autoplayButton markup when autoplay is true but a customized autoplayButton is not provided. |
autoplayResetOnVisibility |
Boolean | Default: true. Pauses the sliding when the page is invisiable and resumes it when the page become visiable again. (Page Visibility API) |
animateIn |
String | Default: 'tns-fadeIn'. Name of intro animation class. |
animateOut |
String | Default: 'tns-fadeOut'. Name of outro animation class. |
animateNormal |
String | Default: 'tns-normal'. Name of default animation class. |
animateDelay |
Integer | false |
Default: false. Time between each gallery animation (in "ms"). |
loop |
Boolean | Default: true. Moves to the first slide with the same direction when reaching the last slide. |
rewind |
Boolean | Default: false. Moves to the first slide with the opposite direction when reaching the last slide. |
autoHeight |
Boolean | Default: false. Height of slider container changes according to each slide's height. |
responsive |
Map: { breakpoint: { key: value } } | false |
Default: false. Breakpoint: Integer. Defines options for different viewport widths (see Responsive Options). |
lazyload |
Boolean | Default: false. Enables lazyloading images that are currently not viewed, thus saving bandwidth (see demo). |
touch |
Boolean | Default: true. Activates input detection for touch devices. |
mouseDrag |
Boolean | Default: false. Changing slides by dragging them. |
nested |
"inner" | "outer" | false |
Default: false. Difine the relationship between nested sliders. (see demo) Make sure you run the inner slider first, otherwise the height of the inner slider container will be wrong. |
freezable |
Boolean | Default: true. Indicate whether the slider will be frozen ( controls, nav, autoplay and other functions will stop work) when all slides can be displayed in one page. |
disable |
Boolean | Default: false. Disable slider. |
startIndex |
Integer | Default: 0. The initial index of the slider. |
onInit |
Function | false |
Default: false. Callback to be run on initialization. |
The following options can be redefined in responsive field:
startIndex,
items,
slideBy,
speed,
autoHeight,
fixedWidth,
edgePadding,
gutter,
controls,
controlsText,
nav,
autoplay,
autoplayHoverPause,
autoplayResetOnVisibility,
autoplayText,
autoplayTimeout,
touch,
mouseDrag,
arrowKeys,
disable.
<script>
var slider = tns({
container: '.my-slider',
items: 1,
responsive: {
640: {
edgePadding: 20,
gutter: 20,
items: 2
},
700: {
gutter: 30
},
900: {
items: 3
}
}
});
</script>NOTE:
fixedWidthcan only be changed to different positive integers. It can't be changed to different data type, 0 or negtive integer. top↑
There are 2 ways to get slider information, both return info Object:
getInfomethod.- Subscribe to an event.
// info Object
info = {
container: container, // slider container
slideItems: slideItems, // slides list
navContainer: navContainer, // nav container
navItems: navItems, // dots list
controlsContainer: controlsContainer, // controls container
hasControls: hasControls, // indicate if controls exist
prevButton: prevButton, // previous button
nextButton: nextButton, // next button
items: items, // items on a page
slideBy: slideBy // items slide by
cloneCount: cloneCount, // cloned slide count
slideCount: slideCount, // original slide count
slideCountNew: slideCountNew, // total slide count after initialization
index: index, // current index
indexCached: indexCached, // previous index
navCurrent: navCurrent, // current dot index
navCurrentCached: navCurrentCached, // previous dot index
visibleNavIndexes: visibleNavIndexes, // visible nav indexes
visibleNavIndexesCached: visibleNavIndexesCached,
event: e || {}, // event object if available
};// get info object
var slider = tns(...);
slider.getInfo();
document.querySelector('.next-button').onclick = function () {
// get slider info
var info = slider.getInfo(),
indexPrev = info.indexCached;
indexCurrent = info.index;
// update style based on index
info.slideItems[indexPrev].classList.remove('active');
info.slideItems[indexCurrent].classList.add('active');
};// go to slides by number or keywords
var slider = tns(...);
slider.goTo(3);
slider.goTo('prev');
slider.goTo('next');
slider.goTo('first');
slider.goTo('last');
document.querySelector('.goto-button').onclick = function () {
slider.goTo(3);
};var slider = tns(...);
slider.destroy();Available events include: indexChanged, transitionStart, transitionEnd, touchStart, touchMove and touchEnd.
var slider = tns(...);
var customizedFunction = function (info) {
// direct access to info object
console.log(info.event.type, info.container.id);
}
// bind function to event
slider.events.on('transitionEnd', customizedFunction);
// remove function binding
slider.events.off('transitionEnd', customizedFunction);.no-js .your-slider { overflow-x: auto; }
.no-js .your-slider > div { float: none; }Firefox 8+ ✓
Chrome 15+ ✓
Safari 4+ ✓
Opera 12.1+ ✓
IE 8+ ✓
Should be working on Chrome 4-14 as well, but I couldn't test it.
Browserstack
Cdnjs
Images used in the demos are from https://unsplash.com/.
This project is available under the MIT license.