Tiny Content Slider with Pure JavaScript – tiny-slider

by Posted on

A tiny yet feature-rich content slider built using pure JavaScript and plain Html / CSS.



Features:

  • Autoplay.
  • Navigation and pagination.
  • Infinite loop like a carousel.
  • Responsive design.
  • Multiple items in one slide.
  • Custom animations.
  • Keyboard navigation.

Content-Slider-JavaScript

Libraries

Add the tiny-slider.css and tiny-slider.js to your webpages.

<link rel="stylesheet" href="assets/css/tiny-slider.css">
<script src="assets/js/tiny-slider.js"></script>

HTML

Add html content to the slider.

<div class="container">
  <div class="slider">
    <div>
      <p>Slide 1</p>
    </div>
    <div>
      <p>Slide 2</p>
    </div>
    <div>
      <p>Slide 3</p>
    </div>
  </div>
</div>

JS

Initialize the slider.

tns({container: '.container'});




You can use following options to customize the plugin.

tns({
  container: '.slider',
  mode: 'carousel', 
  axis: 'horizontal', 
  items: 1,
  gutter: 0,
  edgePadding: 0,
  fixedWidth: false,
  slideBy: 1,
  controls: true,
  controlsText: ['prev', 'next'],
  controlsContainer: false,
  nav: true,
  navContainer: false,
  navAsThumbnails: false,
  arrowKeys: false,
  speed: 300,
  autoplay: false,
  autoplayTimeout: 5000,
  autoplayDirection: 'forward',
  autoplayText: ['start', 'stop'],
  autoplayHoverPause: false,
  autoplayButton: false,
  autoplayButtonOutput: true,
  autoplayResetOnVisibility: true,
  loop: true,
  rewind: false,
  autoHeight: false,
  responsive: false,
  lazyload: false,
  touch: true,
  mouseDrag: false,
  swipeAngle: 15,
  nested: false,
  freezable: true,
  onInit: false
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by ganlanyuan. Visit their official github repository for more information and follow for future updates.


Published by admin