Jssor create dynamic slider

Question

First of all thanks for the perfect slider! My problem is: I have 2 image set on one web page, by clicking each of them I'd like to open a overlay view that has a Jssor slider to show the images. The images in the set are of the same size, say, in set 1 the size is 400*300, and in set 2 the size is 500*300. I want to create a Jssor Slider dynamically when clicking the set:

$("img").click(function(){
    if (this.getAttribute('id') == 'overlayImage'){
        return;
    }
    if (this.getAttribute('u') == 'image'){
        return;
    }
    var imgname = this.getAttribute('id');
    //set images
    if(imgname == 'img29'){
        var imgheight,imgwidth,actualwidth,actualheight;
        var winheight=window.innerHeight,winwidth=window.innerWidth;
        var imgarray;
            imgwidth = 2572.0;
            imgheight = 1830.0;
            imgarray=["29c","29d","29e","29f","29g","29h","29i","29j","29k","29l","29m","29n","29o","29p","29q",
            "29r","29s","29u"];

        //calculate size using screen size
        if(winheight>winwidth){
            //on mobile
            actualwidth=winwidth-140;
            actualheight=imgheight*actualwidth/imgwidth;
        }
        var slider1 = document.getElementById('slider1_container');
        var slider2 = document.getElementById('slider_content');
        slider1.style.width=winwidth+'px';
        slider1.style.height=actualheight+'px';
        slider2.style.width=winwidth+'px';
        slider2.style.height=actualheight+'px';
        slider1.style.top=(winheight-actualheight)/2+'px';

        //want to clean the images added last time.
        slider2.innerHTML="";

        for (var i = 0; i<imgarray.length; i++) {
            var oname = imgarray[i];
            var elem = document.createElement("img");
            elem.src="img/"+oname+".jpg";
            elem.setAttribute('u', 'image');

            var div = document.createElement("div");
            div.appendChild(elem);
            slider2.appendChild(div);
        }

        var options = {
            $AutoPlay: true,
            $PauseOnHover: 1,                               
            $ArrowKeyNavigation: true,                          
            $SlideWidth: actualwidth,                                   
            $SlideHeight: actualheight,                                  
            $SlideSpacing: 35,                                  
            $DisplayPieces: 2,                                  
            $ParkingPosition: 70,                               

            $ArrowNavigatorOptions: {                       
                $Class: $JssorArrowNavigator$,        
                $ChanceToShow: 2,                              
                $AutoCenter: 2,                                 
                $Steps: 1                                       
            }
        };
        var jssor_slider1 = new $JssorSlider$("slider1_container", options);



        $('#imageSetBox').show();
        $('#hrdiv').hide();
        $('#header').hide();

        return;
    }

and in html:

<div id="imageSetBox" class="wrapOverlay">
    <div id="slider1_container" style="position: relative; top: 60px; left: 0px; width: 800px;
        height: 300px; overflow: hidden;">
        <!-- Slides Container -->
        <div id="slider_content" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 800px; height: 300px;overflow: hidden;">
        </div>

        <!--#region Arrow Navigator Skin Begin -->
        <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
        <style>
            /* jssor slider arrow navigator skin 13 css */
            /*
            .jssora13l                  (normal)
            .jssora13r                  (normal)
            .jssora13l:hover            (normal mouseover)
            .jssora13r:hover            (normal mouseover)
            .jssora13l.jssora13ldn      (mousedown)
            .jssora13r.jssora13rdn      (mousedown)
            */
            .jssora13l, .jssora13r {
                display: block;
                position: absolute;
                /* size of arrow element */
                width: 70px;
                height: 1000px;
                cursor: pointer;
                background: url(arrows/a13.png) no-repeat;
                overflow: hidden;
            }
            .jssora13l { background-position: -10px -35px; }
            .jssora13r { background-position: -70px -35px; }
            .jssora13l:hover { background-position: -130px -35px; }
            .jssora13r:hover { background-position: -190px -35px; }
            .jssora13l.jssora13ldn { background-position: -250px -35px; }
            .jssora13r.jssora13rdn { background-position: -310px -35px; }
        </style>
        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora13l" id="leftarrow" style="top: 0px; left: 0px;">
        </span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora13r" id="rightarrow" style="top: 0px; right: 0px;">
        </span>
        <!--#endregion Arrow Navigator Skin End -->
        <a style="display: none" href="http://www.jssor.com">Bootstrap Slider</a>
    </div>
</div>

The result is: the first I click on a set, the slider is rendered perfectly. But the second time I click it, the image is not scaled to fit in the slider, since the images are much larger, only a corner of them are shown.

So how do I fix it? I guess to initialize the slider multiple times using

var jssor_slider1 = new $JssorSlider$("slider1_container", options);

is a bad idea but I don't know how to get around it. Any help is appreciated.

Answer 1

When jssor slider initializes, the content in the slider1_container will be reformatted, so it will be ok when you create it dynamically first time.

To create a new slider again dynamically, the inner elements in slider1_container is not reusable. You'd clear inner elements and recreate it again.