tiny-slider

Tiny slider for all purposes, inspired by Owl Carousel. Works on morden browsers and IE8+.
demo
changelog
examples

Install

bower install tiny-slider

or

npm install tiny-slider

Features

• responsive
• fixed width
• gutter
• edge padding (center)
• loop
• rewind (pull 10)
• slide by page
• slide by
• customize controls / nav
• autoplay
• auto height
• lazyload
• touch support
• arrow keys
• accessibility for people using keyboard navigation or screen readers (issue4)

Usage

1. Include tiny-slider

Include tiny-slider

<link rel="stylesheet" href="tiny-slider.css">

<!--[if (lt IE 9)]><script src="tiny-slider.ie8.js"></script><![endif]-->
<script src="tiny-slider.js"></script>

Or tiny-slider.native + go-native,

<link rel="stylesheet" href="tiny-slider.css">

<!--[if (lt IE 9)]><script src="go-native.ie8.js"></script><![endif]-->
<script src="go-native.js"></script>
<script src="tiny-slider.native.js"></script>

2. Add your markup

<!-- markup -->
<div class="slider">
  <div></div>
  <div></div>
  <div></div>
</div>

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

3. Call tiny-slider on DOM ready

<script>
  gn.ready(function () {
    var slider = tinySlider({
      container: document.querySelector('.slider'),
      items: 3,
      slideByPage: true,
      autoplay: true
    });
    slider.init();
  });
</script>

Methods

var slider = tinySlider(...);
// init
slider.init();

// destory
slider.destory();

Options

Default:

{
  container: document.querySelector('.slider'),
  transform: 'horizontal',
  items: 1,
  gutter: 0,
  gutterPosition: 'right',
  edgePadding: 0,
  fixedWidth: false,
  // maxContainerWidth: false,
  slideByPage: false,
  slideBy: 1,
  controls: true,
  controlsText: ['prev', 'next'],
  controlsContainer: false,
  nav: true,
  navContainer: false,
  arrowKeys: false,
  speed: 250,
  autoplay: false,
  autoplayTimeout: 5000,
  autoplayDirection: 'forward',
  autoplayText: ['start', 'stop'],
  loop: true,
  autoHeight: false,
  responsive: false,
  lazyload: false,
  touch: true,
  rewind: false
}

Note: maxContainerWidth has been removed. slideByPage will be removed from version 1.

Padding

There is no option for padding, but you can add it by css Now you can set the gutter using gutter option.

Fallback

.no-js .your-slider { 
  overflow-x: auto; 
  white-space: nowrap; /* make child elements stay in one row */
}
.no-js .your-slider > div { 
  float: none; /* reset float */
  display: inline-block;
  white-space: normal; /* reset white-space */
}

Todo

• vertical slider

Browser Support

Tested on IE8+ and mordern browsers.

License

This project is available under the MIT license.