Customizable Text Rotator In jQuery - z-Carousel

z-Carousel is a simple, configurable, high-performance jQuery text rotator/carousel plugin for transitioning between text blocks using jQuery fadeIn animation or Animate.css powered CSS3 animations.

How to use it:

1. Install & download the package via NPM.

# NPM
$ npm install z-carousel --save

2. Import the z-Carousel into your project.

// ES 6
import zCarousel from "z-carousel"

<!-- Or From the CDN -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" 
        integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" 
        crossorigin="anonymous">
</script>
<script src="https://unpkg.com/z-carousel@latest/build/index.js"></script>

3. Insert your carousel content into an HTML list.

<div class="z-carousel-wrapper">
  <div class="z-carousel">
    <li class="review" style="display:none;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </li>
    <li class="review" style="display:none;">
        In et est euismod enim dapibus eleifend sed a nulla. Ut maximus tortor sed arcu vulputate, vitae pharetra dolor tincidunt.
    </li>
    <li class="review" style="display:none;">
        Etiam in augue blandit, vestibulum lectus id, consequat nulla. Nulla euismod sit amet libero vitae dapibus.
    </li>
  </div>
</div>

4. Initialize the z-Carousel plugin and done.

$(function() {                
  zCarousel.registerCarousels();
});

5. Config the default transition effect (based on jQuery animation) of the text rotator using the following data attributes:

• data-delay: transition delay (default: 2000)
• data-interval: animation interval (default: 3000)
• data-speed: animation speed (default: 600)

<div class="z-carousel" 
     data-delay="3000" 
     data-interval="5000" 
     data-speed="1000">
     ...
</div>

6. Use animate.css for more elegant animations.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

<div class="z-carousel" 
     data-enter-animation="bounceIn slow">
     ...
</div>

7. Add pagination bullets to the text rotator. Requires Font Awesome Iconic Font.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="z-carousel" 
     data-pagination="true">
     ...
</div>

---

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