jquery Slideshow plugin for mobile phone use

The Jflex is a compact jquery slideshow plugin for mobile phone use. The slideshow plugin supports mobile touch, supports mouse drag-and-drop, and also supports auto-play mode with progress bar. Whether it's a small ball, use very simple.

Online preview Source Download

How to use

Using the slide plug-in requires the introduction of Jquery,jflex.min.js and Jflex.min.css files.

123	<link rel="stylesheet" href="css/jflex.min.css" type="text/css"><script type="text/javascript" src="js/jquery.min.js"></script>  <script type="text/javascript" src="js/jflex.min.js"></script>

HTML Structure

The slide uses the HTML structure of the unordered list, and each <li> element is a slide of the slide. You can set the <li> caption of data-title a slide picture by setting the properties of the element.

12345678910111213

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

Initializing plug-ins

After the page DOM element has finished loading, you can initialize the slide plug-in by using the following method.

1	$(‘.slider‘).jFlex();

You can also insert some configuration parameters at initialization time:

12345

$(‘.flex‘).jFlex({    autoplay: true,    timing: 5000,    titles: ‘bottom‘});

Configuration Parameters

• autoplay: Whether to play the slideshow automatically.
• fx: The slide element of the slide.
• timing: The time when the slide is automatically switched. Unit milliseconds, default value 5000.
• titles: The location of the slide label navigation. Selectable values: Bottom, top.

Browser compatible

• Android 4.1+
• Chrome 31+
• Firefox 38+
• IE + +
• Opera

Via:http://www.w2bc.com/article/jquery-mobile-focus-jflex

jquery Slideshow plugin for mobile phone use