Infinite Scrolling Carousel Plugin For jQuery - Flumen
File Size: | 30.5 KB |
---|---|
Views Total: | 3849 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Flumen is a simple-to-use jQuery plugin used to create a responsive, cross-platform, touch-enabled, infinite scrolling carousel UI for any HTML content you specify.
How to use it:
1. Load the minified version of the jQuery Flumen plugin after jQuery library and we're ready to go.
<script src="//code.jquery.com/jquer.min.js"></script> <script src="flumen.pkgd.min.js"></script>
2. Add your own content to the carousel following the markup structure as this:
<div class="slider"> <div style="background-image: url(1.jpg)">1</div> <div style="background-image: url(2.jpg)">2</div> <div style="background-image: url(3.jpg)">3</div> <div style="background-image: url(4.jpg)">4</div> ... </div>
3. The required CSS to style the carousel & slide items.
.slider { display: flex; overflow: hidden; -webkit-overflow-scrolling: touch; position: relative; margin-bottom: 50px; } .slider > div { flex-shrink: 0; width: 300px; height: 300px; color: white; background: grey; line-height: 300px; font-size: 26px; text-align: center; font-weight: bold; background-repeat: no-repeat; background-size: cover; position: relative; }
4. The JavaScript to active the carousel.
$('.slider').flumen();
5. You're also allowed to create a custom control for the carousel.
<div class="controls"> <a href="#" class="larr">← left</a> <a href="#" class="dot" data-num="1">1</a> <a href="#" class="dot" data-num="2">2</a> <a href="#" class="dot" data-num="3">3</a> <a href="#" class="dot" data-num="4">4</a> <a href="#" class="rarr">right →</a> </div>
$('.dot').on('click', function(){ var num = $(this).data('num'); $('.slider').trigger('flumen.goto', num); }); $('.larr').on('click', function(){ $('.slider').trigger('flumen.left'); }); $('.rarr').on('click', function(){ $('.slider').trigger('flumen.right'); });
6. All possible plugin options to customize the carousel.
$('.slider').flumen({ 'loop': true, 'center': true, 'fluid': true, 'arrows': false, 'dots': false, 'mousewheel': false, 'speed': 300 });
Change log:
2017-06-02
- JS update.
2017-05-31
- flumen.recalc function added
This awesome jQuery plugin is developed by stamat. For more Advanced Usages, please check the demo page or visit the official website.