EasySlider is a powerful and easy-to-use sliding door plug-in based on jQuery

EasySlider is a powerful and easy-to-use sliding door plug-in based on jQuery_jquery

WBOY

Release： 2016-05-16 18:25:07

Original

1142 people have browsed it

Easy Slider is a sliding door plug-in that supports any image or content to slide horizontally or vertically when clicked. It has a rich set of parameter settings and can be fully controlled through CSS. So, basically you only need to link the plug-in file, set the content, and then style the CSS.
EasySlider is a powerful and easy-to-use sliding door plug-in based on jQuery_jquery
Function of EasySlider
Supports horizontal or vertical sliding
Supports automatic scrolling
Supports continuous sliding
"Previous screen" and "Next screen" screen buttons"
"Go to first screen" and "last screen" buttons
Hidden controls
Optional control button surround markers
Multiple sliding doors can be supported on the same page
Yes Set the sliding speed, automatic or not, pause interval, etc.

How to use EasySlider

1. The first is the html tag

Copy code The code is as follows:

content here...

content here...

content here......

previous< ;/span>
Next

Note: The content in each li is a sliding layer, and the span below is used for sliding navigation.
2. Then call the jquery library and EasySlider plug-in

Copy the code The code is as follows:

Note: Place before
3. Initialization plug-in code

Copy code The code is as follows:

Note: Place it below the above code, where #sidebar corresponds to the div element in the HTML tag The CSS selector indicates that the script should be applied to this layer. You can also use a class name, so it would be written here like
$(".list").
.easyslider has many parameters, please refer to the author's original text for details.
4. CSS style definition

Copy code The code is as follows:

 
#slider ul, #slider li{ 
margin:0; 
padding:0; 
list-style:none; 
} 
#slider, #slider li{ 
width:500px; 
height:200px; 
overflow:hidden; 
} 
span#prevBtn{} 
span# nextBtn{} 

Note: Style according to your own needs.
That’s OK.

DEMO demonstration of EasySlider

Default settings (only left and right flips)
Default settings (the following is the digital page)