Package Health Score

58 / 100

security
No known security issues
popularity
Popular
maintenance
Inactive
community
Sustainable

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

Version				Vulnerabilities	License Risk
2.9.4	\|	10/2021	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.8.8	\|	11/2018		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.6.1	\|	08/2017		0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.7.0	\|	12/2016		0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.6.5	\|	11/2016		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Popular

Weekly Downloads (20,969)

GitHub Stars: 5.25K
Forks: 787
Contributors: 50

Direct Usage Popularity

The npm package tiny-slider receives a total of 20,969 downloads a week. As such, we scored tiny-slider popularity level to be Popular.

Based on project statistics from the GitHub repository for the npm package tiny-slider, we found that it has been starred 5,255 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: Yes
Code of Conduct: No
Contributors: 50
Funding: No

With more than 10 contributors for the tiny-slider repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like tiny-slider is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

No Recent Commits

Open Issues: 327
Open PR: 55
Last Release: 3 years ago
Last Commit: 3 years ago

Further analysis of the maintenance status of tiny-slider based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for tiny-slider is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 9 years
Dependencies: 0 Direct
Versions: 85
Install Size: 611 kB
Dist-tags: 1
# of Files: 71
Maintainers: 1
TS Typings: Yes

tiny-slider has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Not sure how to use tiny-slider?

To help you get started, we've collected the most common ways that tiny-slider is being used within popular public projects.

viktorlarsson / vue-tiny-slider / src / index.js View on Github

mouseDrag: this.mouseDrag,
				nested: this.nested,
				freezable: this.freezable,
				disable: this.disable,
				onInit: this.onInit,
				swipeAngle: this.swipeAngle,
				startIndex: this.startIndex,
				center: this.center,
				lazyLoadSelector: this.lazyLoadSelector,
				preventActionWhenRunning: this.preventActionWhenRunning,
        preventScrollOnTouch: this.preventScrollOnTouch,
        autoWidth: this.autoWidth
			}
			removeUndefinedProps(settings);

			this.slider = tns(settings);

			// Emit init event
			this.$emit('init');
			// Subscribe to all kind of tiny-slider events
			this.$_vueTinySlider_subscribeToAll();
		},
	},

View more ways to use tiny-slider

Tiny Slider 2

Tiny slider for all purposes, inspired by Owl Carousel.

Demos

Test results

Previous versions: v1, v0

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.

What's new

Using % instead of px (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 controls and nav before slider instead of after (issue 4)
Move autoplay button out of nav container. (Start from v2.1.0)
Some selector changes in tiny-slider.scss

Migrating to v2

Update controls and / or nav styles based on their position changes.
Update the slider selectors accordingly if used in your CSS or JS.
Update styles related to autoplay button.

top↑

Features

	Carousel *				Gallery
	Horizontal *			Vertical
	Percentage Width *	Fixed Width	Auto Width	Vertical
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	✓	✓	✓	✓	✓

* Default

top↑

Install

bower install tiny-slider or npm install tiny-slider

Usage

1. Add CSS (and IE8 polyfills if needed)

2. Add markup

<div class="my-slider">
  <div></div>
  <div></div>
  <div></div>
</div>

3. Call tns()

Option A: Add tiny-slider.js to your page:

Option B: Import tns via webpack or rollup:

// yourScript.js
import { tns } from "./node_modules/tiny-slider/src/tiny-slider"

Option C: Import tns directly start from v2.8.2

top↑

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')

top↑

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

NOTE:

The breakpoints behave like (min-width: breakpoint) in CSS, so an undefined option will be inherited from previous small breakpoints.
fixedWidth can 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:

{
  version: version, // tiny-slider version
  getInfo: info(),
  events: events, // Object
  goTo: goTo(),
  play: play(),
  pause: pause(),
  isOn: isOn, // Boolean
  updateSliderHeight: updateInnerWrapperHeight(),
  refresh: initSliderTransform(),
  destroy: destroy(),
  rebuild: rebuild()
}

To get the slider information, you can either use the getInfo() method or subscribe to an Event. Both return an Object:

{
                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
             displayIndex: getCurrentSlide(), // display index starts from 1
               navCurrent: navCurrent, // current dot index
         navCurrentCached: navCurrentCached, // previous dot index
                    pages: pages, // visible nav indexes
              pagesCached: pagesCached,
                    sheet: sheet,
                    event: e || {}, // event object if available
};

getInfo

Get slider information.

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');
};

goTo

Go to specific slide by number or keywords.

slider.goTo(3);
slider.goTo('prev');
slider.goTo('next');
slider.goTo('first');
slider.goTo('last');

document.querySelector('.goto-button').onclick = function () {
  slider.goTo(3);
};

play

Programmatically start slider autoplay when autoplay: true.

slider.play();

pause

Programmatically stop slider autoplay when autoplay: true.

slider.pause();

updateSliderHeight

Manually adjust slider height when autoHeight is true.

slider.updateSliderHeight();

destroy

Destroy the slider.

slider.destroy();

rebuild

Rebuild the slider after destroy.

slider = slider.rebuild();
// 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.

var customizedFunction = function (info, eventName) {
  // 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);

top↑

Fallback

.no-js .your-slider { overflow-x: auto; }
.no-js .your-slider &gt; 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.

tiny-slider development dependencies

@babel/cli @babel/core @babel/polyfill @babel/preset-env @rollup/plugin-babel @rollup/plugin-commonjs nightwatch nodemon rollup

FAQs

What is tiny-slider?

Vanilla javascript slider for all purposes, inspired by Owl Carousel. Visit Snyk Advisor to see a full health score report for tiny-slider, including popularity, security, maintenance & community analysis.

Is tiny-slider popular?

The npm package tiny-slider receives a total of 20,969 weekly downloads. As such, tiny-slider popularity was classified as a popular. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is tiny-slider well maintained?

We found indications that tiny-slider is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is tiny-slider safe to use?

The npm package tiny-slider was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 11 November-2024, at 15:58 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (20,969)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Not sure how to use tiny-slider?

Tiny Slider 2

Contents

What's new

Features

Install

Usage

1. Add CSS (and IE8 polyfills if needed)

2. Add markup

3. Call tns()

Options

Responsive options

Methods

getInfo

goTo

play

pause

updateSliderHeight

destroy

rebuild

Custom Events

Fallback

Browser Support

Support

License

tiny-slider development dependencies

FAQs

What is tiny-slider?

Is tiny-slider popular?

Is tiny-slider well maintained?

Is tiny-slider safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues