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.

Features:

• 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="http://code.jquery.com/jquery-1.9.1.min.js"></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>
</ul>

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() {

$("#demo").flexisel({

  //  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: { 
      changePoint:480,
      visibleItems: 1,
      itemsToScroll: 1
    }, 
    landscape: { 
      changePoint:640,
      visibleItems: 2,
      itemsToScroll: 2
    },
    tablet: { 
      changePoint:768,
      visibleItems: 3,
      itemsToScroll: 3
    }
  },

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

});  

});

Change logs:

2017-08-18

• CSS update

2017-07-15

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

2017-06-13

• Updating item initialization process to maintain order of elements.

2017-01-04

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

2016-05-30

• Adding custom navigation element functionality

2016-05-29

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

2015-08-31

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

2015-04-10

• Update jquery.flexisel.js

2014-06-21

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