Pure Javascript Content Slider – Tinyslider.js

Category: Slideshow | August 5, 2018
Pure Javascript Content Slider
Author: ganlanyuan
Official Page: Go to Website
Last Update:August 31, 2019
License:MIT

There are hundreds of plugins available to create the slider for images or content. But it’s important to choose one which best fit your need.

Also, it’s important to select the slider which is lightweight and doesn’t have too many options which you don’t need. I normally prefer to go with the slider which should have all the basic options.

Therefore, Today we have a tiny slider which builds in pure vanilla Javascript. It allows for adding multiple items.  It is a Pure Javascript Content Slider which also allows adding images.

In addition, It comes up with all the basic options which you can use to customize it. Furthermore,  this carousel allows to add Next/Pre and Dot navigation and you can add them above or bottom of slider items.

It gives the ability to add custom events and respond to DOM visibility changes. The Javascript slider is light-weight but still fully responsive and works well on all kind of media devices.

Tiny Slider Features:

  • Loop
  • Rewind
  • Slide by
  • Gutter
  • Edge Padding
  • Responsive
  • Lazyload
  • Autoplay
  • Auto height
  • Touch/drag
  • Arrow keys
  • Customize controls/nav
  • Accessibility
  • Respond to DOM visibility changes
  • Custom events
  • Nested

Basic usage

Add both tiny-slider.css and tiny-slider.js to your web pages. Make sure to add before the closing header.

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

Add the following HTML code to get started.

<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 slider by adding the following Js code.

<script type="module">
	var slider = tns({
	container: '.my-slider',
	items: 3,
	slideBy: 'page',
	autoplay: true
	});
</script>

That’s it!

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.