JQuery slide plug-in for mobile phones

JQuery slide plug-in for mobile phones

Jflex is a small jQuery slide plug-in suitable for mobile phones. This slide plug-in supports mobile touch, mouse drag switching, and automatic playback mode with a progress bar. It is very easy to use.

Download Online Preview source code

Usage

Use this plug-in to import the jquery,jflex.min.jsand 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

This slide uses the HTML structure of the unordered list.<li>An element is a slide of a slide. You can set<li>Elementdata-titleTo set the title of the slide picture.

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>

Initialize the plug-in

After the DOM element on the page is loaded, you can initialize the slide plug-in using the following method.

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

You can also insert some configuration parameters during initialization:

12345

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

Configuration parameters

• autoplay: Whether to automatically play the slide.
• fx: Slide element of a slide.
• timing: The automatic slide switching time. The Unit is millisecond. The default value is 5000.
• titles: The position of the slide label navigation. Value Options: bottom and top.

Browser compatibility

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

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