How to change slide via fade effect in jQuery slideshow plugin

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

Example

Slide is default animation effect

jQuery Slideshow plugin slide 1 photo
jQuery Slideshow plugin slide 2 photo
jQuery Slideshow plugin slide 3 photo
jQuery Slideshow plugin slide 4 photo
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

jQuery Slideshow plugin slide 8 photo
jQuery Slideshow plugin slide 8 photo
jQuery Slideshow plugin slide 8 photo
jQuery Slideshow plugin slide 8 photo
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>
License & Download Slideshow Plugin
Chat With Us Close
Leave Message