❤
npm
Sign UpSign In

tiny-slider-yao

2.6.0 • Public • Published

tiny-slider 2.0

version
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

Contents

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

2. Add markup

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

3. Call tns()

<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: '.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.
If slides less than items, the slider won't be initialized.
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 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 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.
swipeAngle Integer | Boolean Default: 15.
Swipe or drag will not be triggered if the angle is not inside the range when set.
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.

top↑

Responsive options

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 other positive integers. It can't be changed to negtive integer, 0 or other data type. top↑

Methods

The slider returns a slider object with some properties and methods once it's initialized:

{
  getInfo: info(),
  events: events, // Object
  goTo: goTo(),
  play: play(),
  pause: pause(),
  isOn: isOn, // Boolean
  rebuild: rebuild(),
  destroy: destroy()
}

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

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, touchStart, touchMove and touchEnd.

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+ ✓ (Should works on Chrome 4-14 as well, but I couldn't test it.)
Safari 4+ ✓
Opera 12.1+ ✓
IE 8+ ✓

Support

Browserstack
Cdnjs
Images in demos from https://unsplash.com/.

License

This project is available under the MIT license.

Readme

Keywords

none

Package Sidebar

Install

npm i tiny-slider-yao

Repository

github.com/shiningyao/tiny-slider

Homepage

github.com/ganlanyuan/tiny-slider#readme

Weekly Downloads

0

Version

2.6.0

License

MIT

Unpacked Size

464 kB

Total Files

62

Last publish

Collaborators

  • yaoshining
Try on RunKit
Report malware