Infinite Scrolling Carousel Plugin For jQuery - Flumen

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

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="//"></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>

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.


5. You're also allowed to create a custom control for the carousel.

<div class="controls">
  <a href="#" class="larr">&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 &rarr;</a>
$('.dot').on('click', function(){
  var num = $(this).data('num');
  $('.slider').trigger('flumen.goto', num);

$('.larr').on('click', function(){

$('.rarr').on('click', function(){

6. All possible plugin options to customize the carousel.

  'loop': true,
  'center': true,
  'fluid': true,
  'arrows': false,
  'dots': false,
  'mousewheel': false,
  'speed': 300

Change log:



  • 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.