Jdm-tiny-slider NPM

tiny-slider 2.0

Fork of Tiny Slider to fix a specific bug that can't be recreated.

Please don't use this fork, use https://github.com/ganlanyuan/tiny-slider instead

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.

Previous versions: v1, v0

+ What's new
+ Features
+ Install
+ Usage
+ Options
+ Responsive options
+ Methods
+ Custom Events
+ Fallback
+ Browser Support
+ Support
+ License

What's new

Using % instead of px (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 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
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

top↑

Install

bower install tiny-slider or npm install tiny-slider

Usage

1. Include tiny-slider

via cdnjs:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.2.4/tiny-slider.css">

<!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.2.4/min/tiny-slider.helper.ie8.js"></script><![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.2.4/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/src/tiny-slider.module"

2. Add markup

<div class="my-slider">
  <div></div>
  <div></div>
  <div></div>
</div>
<!-- or ul.my-slider > li -->

3. Call tiny-slider

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

top↑

Options

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.
`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.
`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.
`disable`	Boolean	Default: `false`. Disable slider.
`onInit`	Function \| `false`	Default: `false`. Callback to be run on initialization.

top↑

Responsive options

The following options can be redefined in responsive field:
items,
slideBy,
speed,
autoHeight,
fixedWidth,
edgePadding,
gutter,
controls,
controlsText,
nav,
autoplay,
autoplayHoverPause,
autoplayResetOnVisibility,
autoplayText,
autoplayTimeout,
touch,
mouseDrag,
arrowKeys, disable.
NOTE: fixedWidth can only be changed to different positive integers. It can't be changed to different data type, 0 or negtive integer.

<script>
  var slider = tns({
    container: '.my-slider',
    items: 1,
    responsive: {
      640: {
        edgePadding: 20,
        gutter: 20,
        items: 2
      },
      700: {
        gutter: 30
      },
      900: {
        items: 3
      }
    }
  });
</script>

top↑

Methods

There are 2 ways to get slider information, both return info Object:
1. getInfo method.
2. 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
  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
};

getInfo

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

goTo

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

destroy

var slider = tns(...);
slider.destroy();

Custom Events

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

top↑

Fallback

.no-js .your-slider { overflow-x: auto; }
.no-js .your-slider > div { float: none; }

Browser Support

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.

Support

Browserstack
Cdnjs

License

This project is available under the MIT license.

@everything-registry/sub-chunk-1953 @infinitebrahmanuniverse/nolb-jd @zalastax/nolb-jd

2.2.6

7 years ago

2.2.5

7 years ago

2.2.4

7 years ago

jdm-tiny-slider v2.2.6

tiny-slider 2.0

Contents

What's new

Features

Install

Usage

1. Include tiny-slider

2. Add markup

3. Call tiny-slider

Options

Responsive options

Methods

getInfo

goTo

destroy

Custom Events

Fallback

Browser Support

Support

License