Usage
Include the javascripts
<script type="Text/Javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
The Javascript to start it.
<script type="text/javascript" >
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider({
continuous:true,
prevNext: false,
touch: true,
numeric: true,
beforeAnimation: function (t, slider, speed) {
$(this).fadeTo(speed, 1);
slider.find(".slide").not($(this)).fadeTo(speed, 0.5);
},
initCallback: function () {
var currentSlide = this.getSlide(this.getValue("currentSlide"));
currentSlide.fadeTo(0, 1);
this.find(".slide").not(currentSlide).fadeTo(0, 0.5);
}
});
});
</script>
The HTML
<div style="width: 100%;overflow: hidden;"">
<div style="position:relative;width: 50%;margin: 0 auto;">
<div id="slider" style="width: 100%;overflow: visible !important;">
<img src="../images/01.jpg" alt="image description" style="width: 100%"/>
<img src="../images/02.jpg" alt="image description" style="width: 100%"/>
<img src="../images/03.jpg" alt="image description" style="width: 100%"/>
<img src="../images/04.jpg" alt="image description" style="width: 100%"/>
<img src="../images/05.jpg" alt="image description" style="width: 100%"/>
</div>
</div>
</div>