Flexisel - Responsive Carousel jQuery Plugin

As long as there has been jQuery there have been image carousels created with jQuery. The famous jCarousel has been out since 2006, the same year the first version of jQuery was released. However, with the explosion of users now using their mobile devices for their internet browsing — on iPhones, iPads, and the like — it becomes necessary for jQuery plugins to support a good user experience on these devices. Enter Flexisel, the responsive image carousel with options specifically available for adapting the carousel for mobile and tablet devices.

Check out the demo here. Resize your browser window to see how you the plugin can adjust to the window width.

View Demo »

All you have to do is call flexisel on your unordered list containing images. Call it on the $(window).load event (as opposed to the $(document).ready event) so that Flexisel can calculate the width of the images and figure out how to space them out properly.

<script type="text/javascript">
$(window).load(function() {
  $("#myCarousel").flexisel();
});
</script>

Below is how you’d call flexisel by passing in all the options….

<script type="text/javascript">
$(window).load(function() {
  $("#myCarousel").flexisel(
      visibleItems: 4,
      animationSpeed: 200,
      autoPlay: false,
      autoPlaySpeed: 3000,
      pauseOnHover: true,
      enableResponsiveBreakpoints: true,
      responsiveBreakpoints: {
          portrait: {
              changePoint:480,
              visibleItems: 1
          }, 
          landscape: {
              changePoint:640,
              visibleItems: 2
          },
          tablet: {
              changePoint:768,
              visibleItems: 3
          }
      }
  );
});
</script>

Options

Here are the options that you can specify…

Option Values Default Value Description Example
visibleItems Integer 4 Sets the initial number of visible items in the carousel visibleItems: 5
animationSpeed Integer (in Milliseconds) 200 Sets the “speed” of the animation when the carousel navigates right or left. animationSpeed: 1000
autoPlay Boolean false Sets whether or not the carousel automatically scrolls items on a timer autoPlay: true
autoPlaySpeed Integer (in milliseconds) 3000 Sets the interval by which items scroll when autoplaying. Note that the autoPlay value has to be set to true for this value to be applicable autoPlaySpeed: 5000
pauseOnHover Boolean true Sets whether or not to pause the carousel on hover if playing. Note that the autoPlay value has to be set to true for this to be applicable pauseOnHover: false
enableResponsiveBreakpoints Boolean false Sets whether or not to enable responsive breakpoints enableResponsiveBreakpoints: true
responsiveBreakpoints Object responsiveBreakpoints: {
  portrait: {
    changePoint:480,
    visibleItems: 1
  },
  landscape: {
    changePoint:640,
    visibleItems: 2
  },
  tablet: {
    changePoint:768,
    visibleItems: 3
  }
} 		This is an object that specifies responsive breakpoints. In order for this to be enabled the enableResponsiveBreakpoints setting must be set to true. There are 3 different responsive events you can specify (portrait, landscape, and tablet). The changePoint of a responsiveBreakpoint is essentially the point when a screen width reaches or falls below the particular width set in the object. The visibleItems setting specifies the number of items that will be visible for that responsive event. responsiveBreakpoints: {
  portrait: {
    changePoint:480,
    visibleItems: 1
  },
  landscape: {
    changePoint:640,
    visibleItems: 2
  },
  tablet: {
    changePoint:768,
    visibleItems: 3
  }
}

The responsiveBreakpoints object sets the threshold of where the screen width falls below a certain width. So for example, the portrait responsive breakpoint will be applied to the carousel when the screen width is less than the changePoint value set for portrait. The number of items shown in this state will be whatever value is set for visibleItems. Usually, because the portrait responsive event is used to show portrait views on mobile phones, 1 is a good value to set here.

The landscape responsive breakpoint will be applied when the screen width is greater than the width of the portrait changePoint value, but less that the width of the tablet changePoint value. Likewise, when the screen width falls below the tablet changePoint, the number of visibleItems set for the tablet event will be shown.

License

Licensed under the MIT License. Basically free to use and abuse as you see fit — including using it commerical projects. Please just give me a little bit of attribution somewhere by keeping the license info in the .js file. :) Also, if you’d like to buy me a coffee or a beer, that’d be great too…

$ Donate »

Enough talk, where can I get it?

Right here…

View Demo Download on GitHub