Sudo Slider jQuery Plugin - Partial sides

image description image description image description image description image description

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);

            this.css("overflow", "visible");
         }
      });
   });
</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>