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
controls
andnav
before slider instead of after (issue 4) - Move
autoplay
button out ofnav
container. (Start from v2.1.0) - Some selector changes in
tiny-slider.scss
Migrating to v2
- Update
controls
and / ornav
styles based on their position changes. - Update the
slider selectors
accordingly if used in your CSS or JS. - Update styles related to
autoplay
button.
- 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.2/tiny-slider.css">
<!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.5.2/min/tiny-slider.helper.ie8.js"></script><![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.5.2/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"
<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:
fixedWidth
can 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:
getInfo
method.- 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.