Basic jQuery Automatic Content Slider Plugin - Text Slider

Text Slider is a minimalist (~1kb) jQuery plugin that enables you to cycle through any number of Html content (text, images, etc...) with smooth transition effects based on jQuery animate() method.

How to use it:

1. Include jQuery library and the jQuery text slider plugin on your html page.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/text-slider.js"></script>

2. Add slider items as displayed below.

<div class="slide">
  <div class="slider-item">
   Slide 1
  </div>
  <div class="slider-item">
   Slide 2
  </div>
  <div class="slider-item">
   Slide 3
  </div>
</div>

3. Initialize the plugin on the parent container and we're done.

$('.slide').textSlider();

4. Config the text slider plugin.

$('.slide').textSlider({

timeout: 2000,
slideTime: 750,
loop: 1

});

Change logs:

2015-04-15

• added loop.

2015-04-14

• JS rewrite.

---

This awesome jQuery plugin is developed by NathanBastiaans. For more Advanced Usages, please check the demo page or visit the official website.