vulsaiSlider is a jQuery plugin that allows you to create fancy and lightweight content sliders with no html or css overhead.
Download from https://github.com/Vulsai/jQuery-Slider/downloads
Add your markup
<div id="controls">
<a id="prev" href="#">« Previous</a>
<a id="next" href="#">Next »</a>
</div>
<div id="slider">
<ul>
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
</ul>
</div>
<div id="thumbs">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
After adding your jQuery script tag insert
<script type="text/javascript" src="your/path/to/vulsaiSlider.min.js"></script>
<script>
$(function(){
$('#mydiv').vulsaiSlider(options);
});
</script>
/*- Define a width for the container and the slides -*/
#slider, #slider li {width:500px; overflow:hidden;}
#slider li img {display:block; width:100%; height:auto;}
/*- If the animation is fade you need to define a height to the container and the slide -*/
#slider.fade,
#slider.fade li {height:315px;}
#slider.fade li {position:absolute; left:0; top:0; z-index:1;}
#slider.fade li img {min-height:315px;}
/*- If the animation is slide, you must float the slides -*/
#slider.slide ul, #slider.slide li {float:left;}
#slider.slide ul {position:relative; width:32767px;}
- Support for slide and fade transitions
- Next / Prev controls
- Selectable thumbnails
- Automatic mode with time interval option
- Infinite mode (After the last element goes back to the first one)
- Controls opacity
-
transition defaults to
fade
-
The transition type, 'fade' and 'slide' are currently supported
-
thumb_list_id defaults to
#thumbs
-
The thumbs container, can be any DOM element
-
prev defaults to
#prev
-
The previous control, can be any DOM element
-
next defaults to
#next
-
The next control, can be any DOM element
-
nav_opacity defaults to
.3
-
The disabled control opacity, values from 0 to 1 are useful
-
fade_opacity defaults to
.2
-
The transition fade opacity, values from 0 to 1 are useful
-
infinite defaults to
false
-
Enable or disable the infinite repetition of the content
-
automatic defaults to
false
-
Enable or disable the auto start of the slider transitions
-
width defaults to
false
-
Set the width for setting how many pixels the slider should move. Default gets the slider element width.