Clean and Responsive jQuery Carousel Plugin - flexisel

File Size: 152 KB
Views Total: 48586
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Clean and Responsive jQuery Carousel Plugin - flexisel

flexisel is a simple, easy-to-use and cross-platform jQuery plugin that make it easy to create a responsive carousel slider with configurable scrolling animations for showcasing any html elements.


  • Flexisel will adapt responsively as the screen width gets smaller
  • You can also change the number of items shown depending on the screen width!
  •  Other options include autoplay, animation speed when scrolling right and left, initial number of visible items, and more!

How to use it:

1. Include jQuery library and jQuery flexisel on the web page

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>

2. Markup html structure

<ul id="demo">
<li><img src="images/1.png" /></li>
<li><img src="images/2.png" /></li>
<li><img src="images/3.png" /></li>
<li><img src="images/4.png" /></li>
<li><img src="images/5.png" /></li>

3. The CSS

.nbs-flexisel-container {
position: relative;
max-width: 100%;
.nbs-flexisel-ul {
position: relative;
width: 9999px;
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
.nbs-flexisel-inner {
overflow: hidden;
float: left;
width: 100%;
background: #fcfcfc;
background: #fcfcfc -moz-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* FF3.6+ */
background: #fcfcfc -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc)), color-stop(100%, #eee)); /* Chrome,Safari4+ */
background: #fcfcfc -webkit-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Chrome10+,Safari5.1+ */
background: #fcfcfc -o-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Opera11.10+ */
background: #fcfcfc -ms-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* IE10+ */
background: #fcfcfc linear-gradient(top, #fcfcfc 0%, #eee 100%); /* W3C */
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
.nbs-flexisel-item {
float: left;
margin: 0px;
padding: 0px;
cursor: pointer;
position: relative;
line-height: 0px;
.nbs-flexisel-item > img {
width: 100%;
cursor: pointer;
positon: relative;
margin-top: 10px;
margin-bottom: 10px;
max-width: 100px;
max-height: 45px;
/*** Navigation ***/

.nbs-flexisel-nav-left, .nbs-flexisel-nav-right {
width: 22px;
height: 22px;
position: absolute;
cursor: pointer;
z-index: 100;
opacity: 0.5;
.nbs-flexisel-nav-left {
left: 10px;
background: url(../images/button-previous.png) no-repeat;
.nbs-flexisel-nav-right {
right: 5px;
background: url(../images/button-next.png) no-repeat;

4. Call the plugin with options

$(window).load(function() {


  //  The initial number of visible items in the carousel
  visibleItems: 5, 

  // Sets the initial number of items that you want to scroll.
  itemsToScroll: 3,

  // Speed of the scrolling animation
  animationSpeed: 1000, 

  // Sets whether or not the carousel wraps infinitely
  infinite: true,

  // The left/right arrows will be added to the element with this selector instead of the default
  navigationTargetSelector: null,

  // Auto scrolling
  autoPlay: {
    enable: false,
    interval: 5000,
    pauseOnHover: true

  // Custom breakpoints for responsive design
  responsiveBreakpoints: { 
    portrait: { 
      visibleItems: 1,
      itemsToScroll: 1
    landscape: { 
      visibleItems: 2,
      itemsToScroll: 2
    tablet: { 
      visibleItems: 3,
      itemsToScroll: 3

  // callbacks
  loaded: function(){ },
  before: function(){ },
  after: function(){ },
  resize: function(){ }



Change logs:



  • Adding options callback function that will run after the debounced "resize" event completes...


  • Updating item initialization process to maintain order of elements.


  • Adding callback methods for loaded, before transition, and after transition events


  • Adding custom navigation element functionality


  • Adding "disabled" markers when non-infinite carousel reaches the end.


  • Increasing inner container width in CSS to prevent wrapping of cloned items
  • Touch/swipe support


  • Update jquery.flexisel.js


  • Moved arrows outside of the inner container.


This awesome jQuery plugin is developed by 9bitStudios. For more Advanced Usages, please check the demo page or visit the official website.