CODEWITHSUNDEEP
jssor
wondim
wondim

Reputation: 727

jssor slider responsive code works but doesn't restore when browser width is full

jssor is very nice slider! It is working well for a dynamically generated images. Thank you for the great tool. There is only one problem that remains.

The width of the slider container is 640px and I wanted the container to resize when the external container div becomes small. I does it well to diminish the image as desired. However, 1. when I resize the browser again and make a new image search. The slider occupy the entire external div width. So it only appear filling the entire area more than 640px width. 2. The responsiveness doesn't work on mobile devices. I tested in chrome and android browser both in android devices.

The codes I was using Code 1:

   var jssor_slider1 = new $JssorSlider$("slider1_container", options);
   function ScaleSlider() {
     var parentWidth = $("#slider1_container").parent().width();
           if (parentWidth) {
              jssor_slider1.$ScaleWidth(parentWidth);
           }
   }
   ScaleSlider();
   //Scale slider while window load/resize/orientationchange.
   $(window).bind("load", ScaleSlider);
   $(window).bind("resize", ScaleSlider);
   $(window).bind("orientationchange", ScaleSlider);

Code 2:

   var jssor_slider1 = new $JssorSlider$("slider1_container", options);
    if ( $(window).width() > 900 ) {
        function ScaleSlider() {
           var parentWidth = $("#slider1_container").parent().width();
            if (parentWidth) {
                jssor_slider1.$ScaleWidth(parentWidth);
             }
         }
    }
     //Scale slider after document ready
     ScaleSlider();
     if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
     //Capture window resize event
         $(window).bind("resize", ScaleSlider);
     }

Upvotes: 0

Views: 967

Answers (1)

jssor
jssor

Reputation: 6985

Please scale the slider no more than 640 in width.

   var jssor_slider1 = new $JssorSlider$("slider1_container", options);
   function ScaleSlider() {
     var parentWidth = $("#slider1_container").parent().width();
           if (parentWidth) {
              jssor_slider1.$ScaleWidth(Math.min(parentWidth, 640));
           }
   }
   ScaleSlider();
   //Scale slider while window load/resize/orientationchange.
   $(window).bind("load", ScaleSlider);
   $(window).bind("resize", ScaleSlider);
   $(window).bind("orientationchange", ScaleSlider);

Upvotes: 3

Related Questions