Tiny Content Slider with Pure JavaScript

Category: Javascript , Recommended , Slider | October 27, 2020
Author:ganlanyuan
Views Total:21,360 views
Official Page:Go to website
Last Update:October 27, 2020
License:MIT

Preview:

Tiny Content Slider with Pure JavaScript

Description:

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

Inspired by OwlCarousel.

Features:

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

Basic usage:

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>

Add any HTML content to the slider as follows:

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

Initialize the tiny slider and done.

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

Available options to customize the slider.

tns({
  // parent container
  container: '.slider',
  // or 'gallery'
  mode: 'carousel',
  // or 'vertical'
  axis: 'horizontal',
  // number of items to display per slide
  items: 1,
  // space between slides
  gutter: 0,
  // space on the outside
  edgePadding: 0,
  // positive integer
  fixedWidth: false,
  // auto set the width
  autoWidth: false,
  // maximum viewport width for fixedWidth/autoWidth
  viewportMax: false,
  // how many slides to slide at a time
  slideBy: 1,
  // center the active slide
  center: false,
  // shows controls
  controls: true,
  // or 'bottom'
  controlsPosition: 'top',
  // custom prev/next text
  controlsText: ['prev', 'next'],
  // container to hold the controls
  controlsContainer: false,
  // shows prev/next buttons
  prevButton: false,
  nextButton: false,
  // shows nav dots
  nav: true,
  // or 'bottom'
  navPosition: 'top',
  // container to hold the nav dots
  navContainer: false,
  // uses thumbnails as nav dots
  navAsThumbnails: false,
  // shows navigation arrows
  arrowKeys: false,
  // animation speed
  speed: 300,
  // autoplay options
  autoplay: false,
  autoplayPosition: 'top', // or 'bottom'
  autoplayTimeout: 5000,
  autoplayDirection: 'forward', // or 'backward'
  autoplayText: ['start', 'stop'],
  autoplayHoverPause: false,
  autoplayButton: false,
  autoplayButtonOutput: true,
  autoplayResetOnVisibility: true,
  // animation options
  animateIn: 'tns-fadeIn',
  animateOut: 'tns-fadeOut',
  animateNormal: 'tns-normal',
  animateDelay: false,
  // infinite loop
  loop: true,
  // moves to the opposite edge when reaching the first or last slide.
  rewind: false,
  // auto set the height
  autoHeight: false,
  // an object containing breakpoints
  responsive: false,
  // enables lazy load
  lazyload: false,
  // CSS selector of images to lazy load
  lazyloadSelector: '.tns-lazy-img',
  // enables touch events
  touch: true,
  // enables mouse drag
  mouseDrag: false,
  // swipe or drag will not be triggered if the angle is not inside the range when set
  swipeAngle: 15,
  // define the relationship between nested sliders.
  // "inner" | "outer" | false
  nested: false,
  // prevents action when running
  preventActionWhenRunning: false,
  // prevents body scroll on touch device
  preventScrollOnTouch: false,
  // whether the slider will be frozen (controls, nav, autoplay and other functions will stop work) when all slides can be displayed in one page.
  freezable: true,
  // callback
  onInit: false,
  // saves browser capability variables to localStorage and without detecting them everytime the slider runs if set to true.
  useLocalStorage: true,
  // optional Nonce attribute for inline style tag to allow slider usage without `unsafe-inline Content Security Policy source.
  nonce: false
  
});

API methods.

// get info
slider.getInfo();
// goto a specific slide
slider.goTo(2);
slider.goTo('prev');
slider.goTo('next');
slider.goTo('first');
slider.goTo('last');
// play
slider.play();
// pause
slider.pause();
// update slider height
slider.updateSliderHeight();
// destroy the instance
slider.destroy();

Events.

slider.events.on('transitionStart', function (info, eventName) {
  console.log(info.event.type, info.container.id);
});
slider.events.on('transitionEnd', function (info, eventName) {
  console.log(info.event.type, info.container.id);
});
slider.events.on('indexChanged', function (info, eventName) {
  console.log(info.event.type, info.container.id);
});
slider.events.on('newBreakpointStart', function (info, eventName) {
  console.log(info.event.type, info.container.id);
});
slider.events.on('newBreakpointEnd', function (info, eventName) {
  console.log(info.event.type, info.container.id);
});
slider.events.on('touchStart', function (info, eventName) {
  console.log(info.event.type, info.container.id);
});
slider.events.on('touchMove', function (info, eventName) {
  console.log(info.event.type, info.container.id);
});
slider.events.on('touchEnd', function (info, eventName) {
  console.log(info.event.type, info.container.id);
});
slider.events.on('dragStart', function (info, eventName) {
  console.log(info.event.type, info.container.id);
});
slider.events.on('dragMove', function (info, eventName) {
  console.log(info.event.type, info.container.id);
});
slider.events.on('dragEnd', function (info, eventName) {
  console.log(info.event.type, info.container.id);
});

Changelog:

v2.9.4 (10/27/2021)

  • update critical devDependencies

v2.9.3 (07/28/2020)

  • Added: add classname for cloned slides
  • Added: Add nonce option (CSP)
  • Improved: Use epsilon insted of foFixed
  • Fixed: Fix console error ‘Cannot read property ‘appendChild’ of null’
  • Fixed: Check image.complete in case image has been already loaded
  • Fixed: Check if event is cancelable before calling preventDefault
  • Fixed: Adds type=”button” to all elements, preventing the default functionality of submit which mainly effects .NET Webform sites.
  • Fixed: Issue with destroying slides with no nav container
  • Fixed: Fix an issue with responsiveness when page is resized below a breakpoint
  • Fixed: Fix an issue with lazyloadSelector
  • Fixed: Dots nav doesn’t display on resize if the page is loaded first on viewport where slider is disabled
  • Fixed: Fix mediaquerySupport helper
  • Fixed: Fix style checking with autoWidth slider when only 1 item is present
  • Fixed: Fix getIndexMax() for autoWidth

v2.9.2 (05/07/2020)

  • Bugs fixed

v2.9.0 (12/14/2018)

  • update tests, fix a lazyload image issue, fix a transitionduration issue in IE

v2.8.8 (12/08/2018)

  • use static nav
  • fix getVisibleSlideRange()
  • fix autoHeight in edge
  • fix nav number

v2.8.7 (11/10/2018)

  • fix(api): Correct .x()/.xs() to work properly; vertical: fix slides width in some old browsers

v2.8.6 (09/08/2018)

  • update isVisible()

v2.8.5 (08/18/2018)

  • add tag “article” as slide

v2.8.4 (08/12/2018)

  • vertical mode: fix an issue in initialization

v2.8.3 (08/04/2018)

  • update

v2.8.2 (07/21/2018)

  • rm removeElementStyles.js, fix some “disable” related issues in resizeTasks()

v2.8.1 (07/14/2018)

  • update

v2.7.4 (07/08/2018)

  • update vertical slider classes

v2.7.3 (06/30/2018)

  • gallery: fix page overlapping when click nav, fix getImageArray() and getMaxSlideHeight()
  • fix an issue in navInit

v2.7.3 (06/24/2018)

  • gallery: fix page overlapping when click nav, fix getImageArray() and getMaxSlideHeight()

v2.7.2 (06/17/2018)

  • update has3D.js so that it can run in <head>

v2.7.1 (06/09/2018)

  • gallery mode: prevent touching/draging

v2.7.0 (06/02/2018)

  • gallery mode: prevent touching/draging

v2.6.0 (05/30/2018)

  • update touch variables

You Might Be Interested In:


3 thoughts on “Tiny Content Slider with Pure JavaScript

  1. Tomas

    Can anyone please tell me if its possible to have 2 items?
    Getting a:
    “items are not enough to show on 1 page” error

    Reply
  2. Victor Stadnichenko

    I am unable to make this slider work. I tried 15 times. The working sample has too many pages with too much code – tl;dr. Simple instructions don’t work.

    Reply

Leave a Reply