Tiny Touchable jQuery Image Carousel Slider Plugin - jflex

jflex is a tiny jQuery carousel plugin that converts a list of images into a touchable and draggable carousel slider with tabbed navigation & an autoplay timer.

How to use it:

1. Load the required stylesheet in the head that will provide the basic styles for the carousel slider.

<link rel="stylesheet" href="css/jflex.min.css">

2. Add a list of images to the carousel slider. You can custom the text of the tabbed navigation using the data-title attribute on the li tag.

<div class="slider">
  <ul class="slides">
    <li data-title="Slide 1">
      <img alt="" src="1.jpg">
    </li>
    <li data-title="Slide 2">
      <img alt="" src="2.jpg">
    </li>
    <li data-title="Slide 3">
      <img alt="" src="3.jpg">
    </li>
  </ul>
</div>

3. Load the jQuery jflex plugin after jQuery library, before the closing body tag.

<script src="jquery-1.11.3.min.js"></script>
<script src="js/jflex.min.js"></script>

4. Call the function on the top element to initialize the carousel slider.

$('.slider').jFlex();

5. A few options available to customize the carousel slider.

$('.slider').jFlex({

  // enable autoplay
  autoplay: false,

  // slide element
  fx: 'slide',

  // animation speed
  timing: 5000,

  // where to place the tabbed navigation
  titles: 'top',

  // show navigation arrows
  showArrows: false,

  // swipable
  swipeable: true
  
});

Change log:

2015-10-10

• remove 300ms delay for taps on touch devices

2015-10-07

• if data-title is missing, show tabs as 4px tall progress bar

2015-10-05

• rename arrows option to showArrows.
• new options: arrow navigation + turn off the ability to drag/swipe slides.

2015-10-02

• resize tabs based on slides.

2015-09-19

• Add vendor prefixes for CSS Animations.

---

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