Basic Responsive Carousel Plugin For jQuery - Carouseller

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.