Installations
npm install tiny-sliderDeveloper
ganlanyuan
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
Typescript Support
Yes
Node Version
12.18.3
NPM Version
6.14.6
Statistics
5,262 Stars
1,113 Commits
786 Forks
75 Watching
26 Branches
44 Contributors
Updated on 28 Nov 2024
Bundle Size
31.53 kB
Minified
12.59 kB
Minified + Gzipped
Languages
HTML (50.4%)
JavaScript (43.7%)
Nunjucks (4.18%)
CSS (1.39%)
SCSS (0.33%)
Total Downloads
Cumulative downloads
Total Downloads
13,249,972
Last day
-2.6%
11,138
Compared to previous day
Last week
4.3%
59,517
Compared to previous week
Last month
5.9%
245,758
Compared to previous month
Last year
1.1%
2,961,781
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
Tiny Slider 2
Tiny slider for all purposes, inspired by Owl Carousel.
Warning: tiny-slider works with static content and it works in the browser only. If the HTML is loaded dynamically, make sure to call tns() after its loading.
Contents
- What's new
- Features
- Install
- Usage
- Options
- Responsive options
- Methods
- Custom Events
- Fallback
- Browser Support
- Support
- License
What's new
- Using
%instead ofpx(No more recalculation of each slide width on window resize) - Using CSS Mediaqueries if supported
- Save browser capability values to localStorage, so they will not be recheck again until browser get upgraded or user clear the localStorage manually.
- 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.
Features
| Â | Carousel * | Gallery | |||
|---|---|---|---|---|---|
| Horizontal * | Vertical | ||||
| Percentage Width * | Fixed Width | Auto Width | |||
| Loop | ✓ | ✓ | ✓ | ✓ | ✓ |
| Rewind | ✓ | ✓ | ✓ | ✓ |  |
| Slide by | ✓ | ✓ | ✓ | ✓ |  |
| Gutter | ✓ | ✓ | ✓ | ✓ | ✓ |
| Edge padding | ✓ | ✓ | ✓ | ✓ |  |
| Center (v2.9.2+) | ✓ | ✓ | ✓ |  |  |
| Responsive | ✓ | ✓ | ✓ | ✓ | ✓ |
| Lazyload | ✓ | ✓ | ✓ | ✓ | ✓ |
| Autoplay | ✓ | ✓ | ✓ | ✓ | ✓ |
| Auto height | ✓ | ✓ | ✓ | ✓ | ✓ |
| Touch/drag | ✓ | ✓ | ✓ | ✓ | ✓ |
| Arrow keys | ✓ | ✓ | ✓ | ✓ | ✓ |
| Customize controls/nav | ✓ | ✓ | ✓ | ✓ | ✓ |
| Accessibility | ✓ | ✓ | ✓ | ✓ | ✓ |
| Respond to DOM visibility changes | ✓ | ✓ | ✓ | ✓ | ✓ |
| Custom events | ✓ | ✓ | ✓ | ✓ | ✓ |
| Nested | ✓ | ✓ | ✓ | ✓ | ✓ |
Install
bower install tiny-slider or npm install tiny-slider
Usage
1. Add CSS (and IE8 polyfills if needed)
1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css"> 2<!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.helper.ie8.js"></script><![endif]-->
2. Add markup
1<div class="my-slider"> 2 <div></div> 3 <div></div> 4 <div></div> 5</div> 6<!-- or ul.my-slider > li -->
3. Call tns()
Option A: Add tiny-slider.js to your page:
1<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script> 2<!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> -->
Option B: Import tns via webpack or rollup:
1// yourScript.js 2import { tns } from "./node_modules/tiny-slider/src/tiny-slider"
Option C: Import tns directly start from v2.8.2
1<script type="module"> 2 import {tns} from './src/tiny-slider.js'; 3 4 var slider = tns({ 5 container: '.my-slider', 6 items: 3, 7 slideBy: 'page', 8 autoplay: true 9 }); 10 </script>
Options
| Option | Type | Description |
|---|---|---|
container | Node | String | Default: '.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 | positive number | Default: 1. Number of slides being displayed in the viewport. If slides less or equal than items, the slider won't be initialized. |
gutter | positive integer | Default: 0. Space between slides (in "px"). |
edgePadding | positive integer | Default: 0. Space on the outside (in "px"). |
fixedWidth | positive integer | false | Default: false. Controls width attribute of the slides. |
autoWidth | Boolean | Default: false. If true, the width of each slide will be its natural width as a inline-block box. |
viewportMax (was fixedWidthViewportWidth) | positive integer | false | Default: false. Maximum viewport width for fixedWidth/autoWidth. |
slideBy | positive number | "page" | Default: 1. Number of slides going on one "click". |
center (v2.9.2+) | Boolean | Default: false. Center the active slide in the viewport. |
controls | Boolean | Default: true. Controls the display and functionalities of controls components (prev/next buttons). If true, display the controls and add all functionalities. For better accessibility, when a prev/next button is focused, user will be able to control the slider using left/right arrow keys. |
controlsPosition | "top" | "bottom" | Default: "top". Controls controls position. |
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. |
prevButton | Node | String | false | Default: false. Customized previous buttons. This option will be ignored if controlsContainer is a Node element or a CSS selector. |
nextButton | Node | String | false | Default: false. Customized next buttons. This option will be ignored if controlsContainer is a Node element or a CSS selector. |
nav | Boolean | Default: true. Controls the display and functionalities of nav components (dots). If true, display the nav and add all functionalities. |
navPosition | "top" | "bottom" | Default: "top". Controls nav position. |
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. Indicate if the dots are thumbnails. 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 | positive integer | Default: 300. Speed of the slide animation (in "ms"). |
autoplay | Boolean | Default: false. Toggles the automatic change of slides. |
autoplayPosition | "top" | "bottom" | Default: "top". Controls autoplay position. |
autoplayTimeout | positive 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 invisible 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 | positive integer | false | Default: false. Time between each gallery animation (in "ms"). |
loop | Boolean | Default: true. Moves throughout all the slides seamlessly. |
rewind | Boolean | Default: false. Moves to the opposite edge when reaching the first or last slide. |
autoHeight | Boolean | Default: false. Height of slider container changes according to each slide's height. |
responsive | Object: {  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). NOTE: + Class .tns-lazy-img need to be set on every image you want to lazyload if option lazyloadSelector is not specified; + data-src attribute with its value of the real image src is required; + width attribute for every image is required for autoWidth slider. |
lazyloadSelector (v2.9.1+) | String | Default: '.tns-lazy-img'. The CSS selector for lazyload images. |
touch | Boolean | Default: true. Activates input detection for touch devices. |
mouseDrag | Boolean | Default: false. Changing slides by dragging them. |
swipeAngle | positive integer | Boolean | Default: 15. Swipe or drag will not be triggered if the angle is not inside the range when set. |
preventActionWhenRunning (v2.9.1+) | Boolean | Default: false. Prevent next transition while slider is transforming. |
preventScrollOnTouch (v2.9.1+) | "auto" | "force" | false | Default: false. Prevent page from scrolling on touchmove. If set to "auto", the slider will first check if the touch direction matches the slider axis, then decide whether prevent the page scrolling or not. If set to "force", the slider will always prevent the page scrolling. |
nested | "inner" | "outer" | false | Default: false. Define 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 | positive integer | Default: 0. The initial index of the slider. |
onInit | Function | false | Default: false. Callback to be run on initialization. |
useLocalStorage | Boolean | Default: true. Save browser capability variables to localStorage and without detecting them everytime the slider runs if set to true. |
nonce | String / false | Default: false. Optional Nonce attribute for inline style tag to allow slider usage without `unsafe-inline Content Security Policy source. |
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')
Responsive options
The following options can be redefined in responsive field:
startIndex,
items,
slideBy,
speed,
autoHeight,
fixedWidth,
edgePadding,
gutter,
center,
controls,
controlsText,
nav,
autoplay,
autoplayHoverPause,
autoplayResetOnVisibility,
autoplayText,
autoplayTimeout,
touch,
mouseDrag,
arrowKeys,
disable
1<script> 2 var slider = tns({ 3 container: '.my-slider', 4 items: 1, 5 responsive: { 6 640: { 7 edgePadding: 20, 8 gutter: 20, 9 items: 2 10 }, 11 700: { 12 gutter: 30 13 }, 14 900: { 15 items: 3 16 } 17 } 18 }); 19</script>
NOTE:
- The breakpoints behave like
(min-width: breakpoint)in CSS, so an undefined option will be inherited from previous small breakpoints. fixedWidthcan only be changed to other positive integers. It can't be changed to negative integer, 0 or other data type. top↑
Methods
The slider returns a slider object with some properties and methods once it's initialized:
1{ 2 version: version, // tiny-slider version 3 getInfo: info(), 4 events: events, // Object 5 goTo: goTo(), 6 play: play(), 7 pause: pause(), 8 isOn: isOn, // Boolean 9 updateSliderHeight: updateInnerWrapperHeight(), 10 refresh: initSliderTransform(), 11 destroy: destroy(), 12 rebuild: rebuild() 13}
To get the slider information, you can either use the getInfo() method or subscribe to an Event. Both return an Object:
1{ 2 container: container, // slider container 3 slideItems: slideItems, // slides list 4 navContainer: navContainer, // nav container 5 navItems: navItems, // dots list 6 controlsContainer: controlsContainer, // controls container 7 hasControls: hasControls, // indicate if controls exist 8 prevButton: prevButton, // previous button 9 nextButton: nextButton, // next button 10 items: items, // items on a page 11 slideBy: slideBy // items slide by 12 cloneCount: cloneCount, // cloned slide count 13 slideCount: slideCount, // original slide count 14 slideCountNew: slideCountNew, // total slide count after initialization 15 index: index, // current index 16 indexCached: indexCached, // previous index 17 displayIndex: getCurrentSlide(), // display index starts from 1 18 navCurrent: navCurrent, // current dot index 19 navCurrentCached: navCurrentCached, // previous dot index 20 pages: pages, // visible nav indexes 21 pagesCached: pagesCached, 22 sheet: sheet, 23 event: e || {}, // event object if available 24};
getInfo
Get slider information.
1slider.getInfo(); 2 3document.querySelector('.next-button').onclick = function () { 4 // get slider info 5 var info = slider.getInfo(), 6 indexPrev = info.indexCached, 7 indexCurrent = info.index; 8 9 // update style based on index 10 info.slideItems[indexPrev].classList.remove('active'); 11 info.slideItems[indexCurrent].classList.add('active'); 12};
goTo
Go to specific slide by number or keywords.
1slider.goTo(3); 2slider.goTo('prev'); 3slider.goTo('next'); 4slider.goTo('first'); 5slider.goTo('last'); 6 7document.querySelector('.goto-button').onclick = function () { 8 slider.goTo(3); 9};
play
Programmatically start slider autoplay when autoplay: true.
1slider.play();
pause
Programmatically stop slider autoplay when autoplay: true.
1slider.pause();
updateSliderHeight
Manually adjust slider height when autoHeight is true.
1slider.updateSliderHeight();
destroy
Destroy the slider.
1slider.destroy();
rebuild
Rebuild the slider after destroy.
1slider = slider.rebuild(); 2// this method returns a new slider Object with the same options with the original slider
Custom Events
Available events include: indexChanged, transitionStart, transitionEnd, newBreakpointStart, newBreakpointEnd, touchStart, touchMove, touchEnd, dragStart, dragMove and dragEnd.
1var customizedFunction = function (info, eventName) { 2 // direct access to info object 3 console.log(info.event.type, info.container.id); 4} 5 6// bind function to event 7slider.events.on('transitionEnd', customizedFunction); 8 9// remove function binding 10slider.events.off('transitionEnd', customizedFunction);
Fallback
1.no-js .your-slider { overflow-x: auto; } 2.no-js .your-slider > div { float: none; }
Browser Support
Desktop: Firefox 8+ ✓ Chrome 15+ ✓ (Should works on Chrome 4-14 as well, but I couldn't test it.) Safari 4+ ✓ Opera 12.1+ ✓ IE 8+ ✓
Mobile: Android Browser 4.2+ ✓ Chrome Mobile 63+ ✓ Firefox Mobile 28+ ✓ Maxthon 4+ ✓
Support
Live tests and Automated Tests
Live tests, Screenshots and Automated Tests
Cdnjs
Images on demo page are from https://unsplash.com/.
License
This project is available under the MIT license.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 10/18 approved changesets -- score normalized to 5
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 22 are checked with a SAST tool
Reason
56 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-6pw2-5hjv-9pf7
- Warn: Project is vulnerable to: GHSA-4w2j-2rg4-5mjw
- Warn: Project is vulnerable to: GHSA-mrgp-mrhc-5jrq
- Warn: Project is vulnerable to: GHSA-7jxr-cg7f-gpgv
- Warn: Project is vulnerable to: GHSA-xj72-wvfv-8985
- Warn: Project is vulnerable to: GHSA-ch3r-j5x3-6q2m
- Warn: Project is vulnerable to: GHSA-p5gc-c584-jj6v
- Warn: Project is vulnerable to: GHSA-whpj-8f3w-67p5
- Warn: Project is vulnerable to: GHSA-cchq-frgv-rjh5
- Warn: Project is vulnerable to: GHSA-g644-9gfx-q4q4
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
- Warn: Project is vulnerable to: GHSA-9j49-mfvp-vmhm
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4c7m-wxvm-r7gc / GHSA-pch5-whg9-qr2r
- Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-332q-7ff2-57h2
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Score
2.4
/10
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More