Basic Responsive Carousel Plugin For jQuery - Carouseller
File Size: | 22.8 KB |
---|---|
Views Total: | 16092 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Carouseller is an extremely simple jQuery plugin that takes a group of block elements and converts theme into a fully responsive carousel slider with next / prev arrows navigation.
How to use it:
1. Import the required carouseller.css
in the header.
<link rel="stylesheet" href="css/carouseller.css">
2. Import the required carouseller.min.js
script after jQuery library.
<script src="jquery.min.js"></script> <script src="js/carouseller.min.js"></script>
3. Add the block elements and navigation arrows into the carousel slider.
<div class="carouseller row-fluid for-car"> <div class="carousel-wrapper"> <div class="carousel-items"> <div class="span3 carousel-block"> <h2>1 item</h2> </div> <div class="span3 carousel-block"> <h2>2 item</h2> </div> <div class="span3 carousel-block"> <h2>3 item</h2> </div> <div class="span3 carousel-block"> <h2>4 item</h2> </div> <div class="span3 carousel-block"> <h2>5 item</h2> </div> <div class="span3 carousel-block"> <h2>6 item</h2> </div> <div class="span3 carousel-block"> <h2>7 item</h2> </div> </div> </div> <div class="carousel-control-block"> <div class="carousel-button-left shadow"><a href="javascript:void(0)">‹</a></div> <div class="carousel-button-right shadow"><a href="javascript:void(0)">›</a></div> </div> </div>
4. Initialize a new carousel slider.
carouseller = new carousel('.carouseller');
5. Possible options with default values.
scrollSpeed: 150, autoScrollDelay: 0, sens: 100, hoverStopScroll: true, easing: 'linear'
Change logs:
2017-01-18
- v0.32b
2016-02-17
- fixes
2016-02-16
- adding touch-swipe scroll
2015-12-30
- JS update.
2015-12-15
- small fix
2015-12-02
- CSS optimization
2015-10-29
- little CSS fixes
2015-10-02
- little fixes
2015-08-31
- Revert "fix little bug with carousel height"
2015-08-11
- add autoscroll and fix height bug
2015-08-08
- fix margin left after right-left scroll (js)
This awesome jQuery plugin is developed by shrue348. For more Advanced Usages, please check the demo page or visit the official website.