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