title: Jssor's nearby image partial visible Slider: Have to click on the slider for the pictures to load
body: <p>I am creating a website with bootstrap and i am trying to integrate the Jssor's nearby image partial visible Slider in a page. You can see the page live in <a href="http://www.anagiannaros.com/articdesign/pages/projects/kingdom-tower-riyadh-beta-jssor-slider.html" rel="nofollow noreferrer">this</a> link.
  The problem with the specific slider is that on page load, only the first picture will load. Then, i have to click on the slider for the rest of the pictures to load.
  Unfortunately, i do not have javascript knowledge in order to deal with this problem on my own so i really hope someone can help me. Thank everyone in advance for their time.</p>
  
  <p>html-file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Artic Design - Kingdom Tower Riyadh&lt;/title&gt;
   &lt;link rel="icon" href="../../images/favicon.ico" /&gt; 
      &lt;link href="../../css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" type="text/css" href="../../css/navbar.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="../../css/main.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="../../css/carousel-custom-navigation-buttons.css"&gt;
      
  &lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
      &lt;!-- use jssor.slider.mini.js (40KB) instead for release --&gt;
      &lt;!-- jssor.slider.mini.js = (jssor.js + jssor.slider.js) --&gt;
      &lt;script type="text/javascript" src="../../js/jssor-slider/jssor.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../js/jssor-slider/jssor.slider.js"&gt;&lt;/script&gt;
      &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;!--[if lt IE 8]&gt;
          &lt;style&gt;
          .bubble { position: absolute; left: 93px; top: 21px; width: 135px; height: 84px; text-align: center;}
          .vertical-align-middle { position: relative; font-size: 11px; margin-top: expression(this.offsetHeight &lt; this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
          }
          &lt;/style&gt;
   &lt;![endif]--&gt;    
    &lt;/head&gt;
    &lt;body&gt;
      &lt;!-- Navigation Start --&gt;
      &lt;div class="navbar-wrapper navbar navbar-inverse navbar-static-top nav-top-height" role="navigation"&gt;
          &lt;nav&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;span class="visible-xs"&gt;&lt;a class="navbar-brand text-center" href="../index.html"&gt;&lt;p&gt;ARTIC DESIGN&lt;/p&gt;&lt;/a&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;&lt;a href="../../index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../news.html"&gt;NEWS&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="active"&gt;&lt;a href="../projects.html"&gt;PROJECTS&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../creative-services.html"&gt;CREATIVE SERVICES&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../team.html"&gt;TEAM&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../contact.html"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;!-- Navigation End --&gt;
        
      &lt;!-- Main Body Start --&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
     &lt;div class="col-sm-12 col-md-3 col-lg-2 hidden-xs"&gt;
                  &lt;div class="pull-right-md pull-right-lg"&gt;
                      &lt;!-- Project Text Info --&gt;
                      &lt;div class="pull-right-md pull-right-lg"&gt;
                       &lt;section class="project-info"&gt;
                           &lt;p class="project-title tmarg-twenty"&gt;KINGDOM TOWER RIYADH, KSA&lt;/p&gt;
                              &lt;p class="project-info-text"&gt;Η φωτιστική μας προσέγγιση βασίστηκε στο να τονίσουμε τις τρεις ζώνες του κτηρίου καθλως και την οροφή του. Το υπόλοιπο σώμα του κτηρίου έχει έναν υποτυπώδη αλλά στοχευμένο φωτισμό ετσι ώστε τη νύχτα να “βυθίζεται” στο backround του ουρανού.&lt;/p&gt;
                              &lt;p class="project-crew"&gt;
                               &lt;span class="project-crew-property"&gt;Lighting Designer:&lt;span&gt;&lt;br&gt;
                                  &lt;span class="project-crew-value"&gt;George Tellos&lt;/span&gt;&lt;br&gt;
                                  &lt;span class="project-crew-property"&gt;Constructor:&lt;/span&gt;&lt;br&gt;
                                  &lt;span class="project-crew-value"&gt;Masic Holding&lt;/span&gt;&lt;br&gt;
                                  &lt;span class="project-crew-property"&gt;Location:&lt;/span&gt;&lt;br&gt;
                                  &lt;span class="project-crew-value"&gt;Jeddah KSA&lt;/span&gt;
                              &lt;/p&gt;
                          &lt;/section&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="clearfix visible-sm"&gt;&lt;/div&gt;
              &lt;div class="col-sm-12 col-md-9 col-lg-10 carousel-col"&gt;
                  &lt;!-- Project Carousel --&gt;
                  &lt;script&gt;
       jQuery(document).ready(function ($) {
        var options = {
         $AutoPlay: false,
     
         $PauseOnHover: true,                               //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false
     
         $ArrowKeyNavigation: true,                  //Allows arrow key to navigate or not
         $SlideWidth: 600,                                   //[Optional] Width of every slide in pixels, the default is width of 'slides' container
         //$SlideHeight: 300,                                  //[Optional] Height of every slide in pixels, the default is width of 'slides' container
         $SlideSpacing: 0,                      //Space between each slide in pixels
         $Cols: 2,                                  //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
         $Align: 100,                                //The offset position to park slide (this options applys only when slideshow disabled).
     
         $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
          $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
          $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
          $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
        }
          };
       var jssor_slider1 = new $JssorSlider$("slider1_container", options);
       //responsive code begin
       function ScaleSlider() {
        var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
        if (parentWidth)
         jssor_slider1.$ScaleWidth(Math.min(parentWidth, 800));
        else
         window.setTimeout(ScaleSlider, 30);
       };
       ScaleSlider();
       jssor_slider1.$Play();
       $(window).bind("load", ScaleSlider);
       $(window).bind("resize", ScaleSlider);
       $(window).bind("orientationchange", ScaleSlider);
       //responsive code end
       });
         &lt;/script&gt;
                  &lt;!-- Jssor Slider Begin --&gt;
                  &lt;!-- You can move inline styles to css file or css block. --&gt;
                  &lt;div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 100%; overflow: hidden;"&gt;
                      &lt;!-- Slides Container --&gt; 
                      &lt;div id="slider1_container-inside" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 100%; overflow: hidden;"&gt;  &lt;!-- height: 1000px; --&gt;
                          &lt;div&gt;&lt;img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/Kingdom Tower Riyadh, Kingdom of Saudi Arabia.png" /&gt;&lt;/div&gt;
                          &lt;div&gt;&lt;img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/1.JPG" /&gt;&lt;/div&gt;
                          &lt;div&gt;&lt;img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/2.JPG" /&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div id="arrow_container" class="bubble"&gt;
                          &lt;!-- Arrow Left --&gt;
                          &lt;div class="vertical-align-middle"&gt;
                           &lt;span u="arrowleft" class="jssoral" style="width: 40px; height: 50px; left: 30px;"&gt;&lt;/span&gt; &lt;!-- top: 500px; --&gt;
                          &lt;/div&gt;
                          &lt;!-- Arrow Right --&gt;
                          &lt;div class="vertical-align-middle"&gt;
                           &lt;span u="arrowright" class="jssorar" style="width: 40px; height: 50px; right: 30px;"&gt;&lt;/span&gt; &lt;!-- top: 500px; --&gt;
                          &lt;/div&gt;
                          &lt;!-- Arrow Navigator Skin End --&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Jssor Slider End --&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 visible-xs"&gt;
                  &lt;div class="pull-right-md pull-right-lg"&gt;
                      &lt;!-- Project Text Info --&gt;
                      &lt;div class="pull-right-md pull-right-lg"&gt;
                       &lt;section class="project-info"&gt;
                           &lt;p class="project-title"&gt;KINGDOM TOWER RIYADH, KSA&lt;/p&gt;
                              &lt;p class="project-info-text"&gt;Η φωτιστική μας προσέγγιση βασίστηκε στο να τονίσουμε τις τρεις ζώνες του κτηρίου καθλως και την οροφή του. Το υπόλοιπο σώμα του κτηρίου έχει έναν υποτυπώδη αλλά στοχευμένο φωτισμό ετσι ώστε τη νύχτα να “βυθίζεται” στο backround του ουρανού.&lt;/p&gt;
                              &lt;p class="project-crew"&gt;Lighting Designer: GEORGE TELLOS&lt;br&gt;Constructor: MASIC HOLDING&lt;br&gt;Location: JEDDAH KSA&lt;/p&gt;
                          &lt;/section&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Main Body End --&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="../../js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;--&gt;
     &lt;!-- this script resizes the slider's height so it will cover all of the usable browser's height. 
     $(window).resize(function WinResize1()
     {
      var usable_height = $(window).height();
      $('#slider1_container').height(usable_height-70);
      $('#slider1_container-inside').height(usable_height-70);
      //alert(usable_height);   
     })
     $(window).resize();
   &lt;/script&gt;
      &lt;script&gt;--&gt;
     &lt;!-- this script resizes the bubble's height so it will be the same as the slider's height in order for the carousel's arrow to be succesfully vertical-aligned --&gt;
     $(window).resize(function WinResize1()
     {
      var carousel_height = $('#slider1_container').height();
      $('#arrow_container').height(carousel_height);
      //alert(carousel_height);   
     })
     $(window).resize();
   &lt;/script&gt;
      &lt;script&gt;
              jssor_slider1_starter('slider1_container');
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>