• 4/22/2013
• 4447
• jQuery Slides plugin, jQuery Slideshow plugin, best Slideshow plugin, Rudra Softtech LLP, Best Wed Development Company

Here is an example of modifying slide change animation effect of the slideshow plugin.

Example

Slide is default animation effect

HTML & Script

<div class="rst-slides" id="example1">
    <div class="rst-slide">
        <img src="pic-1.jpg" />
    </div>
    <div class="rst-slide">
        <img src="pic-2.jpg" />
    </div>
    <div class="rst-slide">
        <img src="pic-3.jpg" />
    </div>
    <div class="rst-slide">
        <img src="pic-4.jpg" />
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
    type="text/javascript"></script>
<link href="slides.css" rel="Stylesheet" />
<script src="slides.js" type="text/javascript"></script>
<script src="swipe.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function () {
        $("#example1").slides();
    });
</script>

Window load event of jQuery is used because slides contain images and this event will wait for images to get loaded before firing slideshow plugin into action.

Fade animation effect

HTML & Script

<div class="rst-slides" id="example2">
    <div class="rst-slide">
        <img src="pic-5.jpg" />
    </div>
    <div class="rst-slide">
        <img src="pic-6.jpg" />
    </div>
    <div class="rst-slide">
        <img src="pic-7.jpg" />
    </div>
    <div class="rst-slide">
        <img src="pic-8.jpg" />
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"     type="text/javascript"></script>
<link href="slides.css" rel="Stylesheet" />
<script src="slides.js" type="text/javascript"></script>
<script src="swipe.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function () {
        $("#example2").slides({ NextHideAnimate: { Effect: 'fade', Props: { direction: '' }, Interval: 1000 },
            PrevHideAnimate: { Effect: 'fade', Props: { direction: '' }, Interval: 1000 },
            NextShowAnimate: { Effect: 'fade', Props: { direction: '' }, Interval: 2000 },
            PrevShowAnimate: { Effect: 'fade', Props: { direction: '' }, Interval: 2000 }
        });
    });
</script>