Easy slider: Powerful and easy-to-use jquery sliding door plug-in

Document directory

• Easyslider Functions
• Easyslider usage
• Demo of easyslider
• Easyslider's original text link

Easy SliderIt 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

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

<script type="text/javascript" src="/js/jquery.js">

</script><script type="text/javascript" src="/js/easySlider.js"></script>

Note: Put before

3. initialize the plug-in code

<script type="text/javascript">$(document).ready(function(){

$("#slider").easySlider({

prevText: 'previous Slide',

nextText: 'Next Slide',

orientation: 'vertical'

        });

    });

</script>

Note: Below the code above, # 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 written as similar
$ (". List ").

. Easyslider has many parameters. For more information, see the author's original article.

4. CSS style Definition

#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 based on your own needs.

In this case, OK.

Demo of easyslider

• Default settings (no styles)
• Default settings (style)
• No styles/vertical scrolling/"go to first" and "go to last" Buttons available
• Styling/automatic scrolling/continuous sliding
  
• Styling/multiple sliding doors/image and content sliding doors/various settings
  

Easyslider's original text link

• Jquery Plugin-Easy image or content Slider
  This is the first release of the article, including detailed instructions and parameter explanations and demo demos.
• Easy slider 1.5-the easiest jquery plugin for sliding images and content
  This is the updated version 1.5. It mainly introduces the UPDATE function.

 

 

Source: http://paranimage.com/easy-slider/