Easy Slider is a sliding door plugin that supports any picture or content, and when clicked, horizontal or vertical sliding is achieved. It has a wide range of parameter settings and can be fully controlled through CSS. So, basically you just need to link the plugin file, set the content, and then style CSS on it.
the function of Easyslider
Supports horizontal or vertical sliding
Supports automatic scrolling
Support Continuous sliding
"Previous screen" and "Next screen button"
"To first screen" and "Last Screen" buttons
Hidden control
Optional control button Surround tag
Multiple sliding doors can be supported on the same page
Can be set sliding speed, whether automatic, pause interval, etc.
How to use Easyslider
1. First is the HTML tag
Copy Code code 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 contents of each Li are a sliding layer, and the following span is used for sliding navigation.
2. Then call the jquery Library and the Easyslider plugin
Copy Code code as follows:
<script type= "Text/javascript" src= "/js/jquery.js" ></script>
<script type= "Text/javascript" src= "/js/easyslider.js" ></script>
Note: Before
3. Initialize plug-in code
Copy Code code as follows:
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#slider"). Easyslider ({
Prevtext: ' Previous Slide ',
Nexttext: ' Next Slide ',
Orientation: ' Vertical '
});
});
</script>
Note: Below the above code, where the #sidebar corresponds to the CSS selector for 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 written like
$ (". List").
Easyslider has many parameters to view the author's original text.
4. CSS style definition
Copy Code code 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: Styling according to your own needs.
That's OK.
Demo demo of Easyslider
Default settings (only left and right flip)
Default settings (the number page below)
