EasySlider is a jQuery-based, powerful, simple, and easy-to-use sliding door plug-in.

Easy Slider is a sliding door plug-in that supports any image or content. It slides horizontally or vertically when clicked. It has a series of rich parameter settings and can be fully controlled through CSS. Therefore, basically you only need to link this plug-in file, set the content, and then style CSS.

EasySlider Functions
Supports horizontal or vertical sliding
Supports automatic scrolling.
Continuous sliding
"Last screen" and "Next screen button"
"To the first screen" and "last screen" buttons
Hidden Control
Optional control button surround tag
Multiple sliding doors are supported on the same page.
You can set the sliding speed, automatic or pause interval, and so on.

EasySlider usage

1. First, html Tag
Copy codeThe Code is as follows:
<Div id = "slider">
<Ul>
<Li> content here... </li>
<Li> content here... </li>
<Li> content here... </li>
...
</Ul>
<Span id = "prevId"> <a href = "javascript: void (0);"> previous </a> </span>
<Span id = "nextBtn"> <a href = "javascript: void (0);"> Next </a> </span>
</Div>

Note: The content in each li is a sliding layer, and the following span is used for sliding navigation.
2. Call the jquery Library and the EasySlider plugin.
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "/js/jquery. js"> </script>
<Script type = "text/javascript" src = "/js/easySlider. js"> </script>

Note: Before 3. initialize the plug-in code
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Slider"). easySlider ({
PrevText: 'previous slide ',
NextText: 'Next slide ',
Orientation: 'vertical'
});
});
</Script>

Note: The # sidebar corresponds to the CSS selector of the div element in the HTML Tag, indicating that the script is applied to this layer. You can also use the class name, which is similar
$ (". List ").
. Easyslider has many parameters. For more information, see the author's original article.
4. CSS style Definition
Copy codeThe 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: styles are made based on your own needs.
In this case, OK.

DEMO of EasySlider

Default settings (only Flip left and right)
Default settings (number page below)