Skip to content

irfan/jquery-slider-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Please check full documentation for other features of this plugin

How to use

Include jquery, slider.js and slider.css files to your page

<link rel="stylesheet" type="text/css" src="../min/slider.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="../min/slider.js"></script>

Example HTML

<div id="sliderContainer">
    <ul class="sliderItems">
        <li><img src="img/turkey.jpg"></img></li>
        <li><img src="img/going_to_base_camp.jpg"></img></li>
        <li><img src="img/climbing.jpg"></img></li>
        <li><img src="img/mountain.jpg"></img></li>
        <li><img src="img/walking.jpg"></img></li>
    </ul>
</div>

Basic Usage

<script type="text/javascript">
    $('#sliderContainer').slider();
</script> 

Customizable Options

{
    method: 'circle',       // type flat or circle
    auto: true,             // if you type true it gonna start automatically when document ready
    showControls: true      // type true or false
    wait: 4000,             // wait before next item
    duration: 100,          // sliding duration

}

Example of user defined options

<script type="text/javascript">
    $(function(){
        $('#sliderContainer').slider({
            wait : 2500,
            method:'flat'
        });
    });
</script>