In this Example we’ll build a simple (or complex) responsive slider carousel that is easily customizable. (Demo)

HTML Structure

1. Add the following html where you wish the slideshow to appear.

<div id="slideshow" class="img-center" style="position: relative; width: 945px; height: 742px;"> 
        <!-- Slides Container --> 
        <!-- Migrate inline styles to CSS file and adjust width/height to match original image dimensions #slideshow-wrapper -->
        <div u="slides" id="slideshow-wrapper" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 945px; height: 742px; overflow: hidden;">
          <div> <img data-u=image src="http://cdn.jssor.com/demos/img/landscape/01.jpg" alt=""/> </div>
          <div> <img data-u=image src="http://cdn.jssor.com/demos/img/landscape/02.jpg" alt=""/> </div>
          <div> <img data-u=image src="http://cdn.jssor.com/demos/img/landscape/03.jpg" alt=""/> </div>
          <div> <img data-u=image src="http://cdn.jssor.com/demos/img/landscape/04.jpg" alt=""/> </div>
        </div>
      </div>

2. Add images by updating the src attribute on each image. Add slides by adding additional <div> tags surrounding an img element. (Protip: Whenever possible use images of the same dimensions.This will keep page height consistient and avoid jumpy behavior from image to image.

CSS

1. Make sure to migrate inline styles to your projects stylesheet.

Adding the JavaScript

1. Add jQuery to your page via CDN or host locally if you prefer.
2. Add the JSSOR plugin script directly below the jQuery script.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jssor-slider/20.0.0/jssor.slider.min.js"></script>

3. Next we will need to create a place to store our local JavaScript call to interact with the script. In your text editor create a new file and name it local-calls.js.
4. Save this file in the /js (scripts) directory.
5. Add the following starter code…

        jssor_slider1_starter = function (containerId) {
            var _SlideshowTransitions = [
            //Paste your custom transitions on the line below.
			
			{ $Duration: 1200, $Opacity: 2 }
			
            //--------------------------------------------------
			];
            var options = {
                $SlideDuration: 500,  
                $AutoPlay: true,
                $Idle: 3000,                            
                $SlideshowOptions: { 
                $Class: $JssorSlideshowRunner$,
                $Transitions: _SlideshowTransitions,
                }
            };
			var jssor_slider1 = new $JssorSlider$(containerId, options);
        // Adds Responsiveness
		function ScaleSlider() {
            var parentWidth = $('#slideshow').parent().width();
            if (parentWidth) {
                jssor_slider1.$ScaleWidth(parentWidth);
            }
            else
                window.setTimeout(ScaleSlider, 30);
        }
        ScaleSlider();
        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        }
        jssor_slider1_starter('slideshow');

6. Save the Document.
7. Include the new script in your html document immediately following the inclusion of the plugin. (Adjust path if necessary)

<script src="js/local-calls.js"></script>

8. Preview the document in your browser. If it is  not working use the Developer Tools (f12) and make sure all resources are being found or if there is another error.
9. If would like to customize further  use the Transition Viewer to change the animation. Copy the Transition Code and paste in the local-calls.js file replacing the following string.

{ $Duration: 1200, $Opacity: 2 }