Customizable Text Rotator In jQuery - z-Carousel
File Size: | 45.2 KB |
---|---|
Views Total: | 1307 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.