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-title
To 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.
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