
Eclipse is a lightweight any content slider jQuery plugin which helps developers to create responsive, mobile-friendly carousels on the web app.
More features:
- Fully responsive.
- Supports touch events.
- Configurable autoplay behavior.
- Slider controls.
- Allows to specify the number of slides to show at a time.
- Easy to customize using your own CSS.
How to use it:
1. Link to jQuery library and the Eclipse Slider's files.
<link rel="stylesheet" href="/path/to/eclipse.css"> <script src="/path/to/jquery.min.js"></script> <script src="eclipse.js"></script>
2. Add a group of slides to the carousel slider.
<div id="eclipse-example"> <div class="eclipse-slider"> <div>First</div> <div>02</div> <div>03</div> <div>04</div> <div>Last</div> </div> </div>
3. Call the function on the top container to generate a basic carousel slider.
$(function(){ $('#eclipse-example').eclipse(); });
4. Enable & config the autoplay functionality.
$('#eclipse-example').eclipse({ // default: false autoplay: true, // default: 3000 interval: 5000 });
5. The plugin also allows multiple slides to move at a time.
$('#eclipse-example').eclipse({ // default: 1 slidesToShow: 3, // default: 1 slidesToMove: 3 });
6. More configuration options with default values.
$('#eclipse-example').eclipse({ // namespace nameSpace: 'eclipse', // 0 = first slide startIndex: 0, // 0 = first slide countIndex: 0, // enable arrow navigation arrow: true, // enable pagination bullets pager: true, // animation speed speed: 500, // space betwen slides margin: 0, // for touch swipe & mouse move // in pixels friction: 200 });
This awesome jQuery plugin is developed by /simplizm-company. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 07.03.2019
- Source