Tiny Touchable jQuery Image Carousel Slider Plugin - jflex
File Size: | 10.9 KB |
---|---|
Views Total: | 4448 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.