Slider With Slideshow Jquery

Jssor Slider comes with 360+ slideshow transitions, user can choose any of these to create his/her slider.

To get transition code, reference 360+ Slideshow Effects

Slider with Slideshow (jQuery)
1. Javascript Code
<script src="jquery.min.js"></script>
<script src="jssor.slider.min.js"></script>
<script>
    jQuery(document).ready(function ($) {
        //Define an array of slideshow transition code
        var _SlideshowTransitions = [
        { code1 },
        { code2 },
        { code3 }
        ];
        var options = {
            $AutoPlay: 1,
            $SlideshowOptions: {
                    $Class: $JssorSlideshowRunner$,
                    $Transitions: _SlideshowTransitions,
                    $TransitionsOrder: 1,
                    $ShowLink: true
                }
        };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>

Ad

2. HTML code
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div><img u="image" src="image1.jpg" /></div>
        <div><img u="image" src="image2.jpg" /></div>
    </div>
</div>

Get Slider with Slideshow Example
Preview Slider with Slideshow Example

Download Jssor Slider, extract zip file and find ‘examples/slider-with-slideshow.html’.

Reference