title: problems with the slider using html and javascript
body: <p>i have used a slider in my website <a href="http://webpcsupport247.com/">http://webpcsupport247.com/</a>. on the page load i am having issue that the slider images get displayed beneath the slider area and after few moments slider works fine. this  is a simple html website .please help me in this regard:</p>
  
  <p>my code for slider is like this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      jQuery(function () {
          var Page294 = (function () {
              var $navArrows = jQuery('#nav-arrows294').hide(), $navDots = jQuery('#nav-dots294').hide(), $nav = $navDots.children('span'),
  slicebox = jQuery('#ju-dslider294').slicebox({
      onReady: function () { $navArrows.show(); $navDots.show(); },
      onBeforeChange: function (pos) { $nav.removeClass('nav-dot-current'); $nav.eq(pos).addClass('nav-dot-current'); },
      orientation: 'v',
      perspective: 1200,
      cuboidsCount: 7,
      cuboidsRandom: true,
      maxCuboidsCount: 7,
      disperseFactor: 10,
      colorHiddenSides: '#222',
      sequentialFactor: 150,
      speed: 600,
      easing: 'ease',
      autoplay: true,
      interval: 5000,
      fallbackFadeSpeed: 300
  }),
  init = function () {
      initEvents();
  },
  initEvents = function () {
      // add navigation events
      $navArrows.children(':first').on('click', function () {
          slicebox.next();
          return false;
      });
      $navArrows.children(':last').on('click', function () {
          slicebox.previous();
          return false;
      });
      $nav.each(function (i) {
          jQuery(this).on('click', function (event) {
              var $dot = jQuery(this);
              if (!slicebox.isActive()) {
                  $nav.removeClass('nav-dot-current');
                  $dot.addClass('nav-dot-current');
              }
              slicebox.jump(i + 1);
              return false;
          });
      });
  };
              return { init: init };
          })();
          Page294.init();
      });
  &lt;/script&gt;
  
  &lt;!-- start 3d slider --&gt;
  &lt;div class="ju-dslider-wrapper"&gt;
  &lt;ul id="ju-dslider294" class="ju-dslider" style="margin: 0px auto; padding: 0px; position: relative; overflow: hidden; width: 100%; list-style-type: none; max-width: 960px;"&gt;
  &lt;li class="" style="display: none;"&gt;
  &lt;a href="" target="_blank"&gt;
  &lt;img src="Home_files/slider1.png" alt=""&gt;
  &lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="ju-dcurrent" style="display: block;"&gt;
  &lt;img src="Home_files/slider3.png" alt="Lorem ipsum dolor sit amet, consetetur sad dunt ut labore et dolore magna aipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua"&gt;
  &lt;%--&lt;div class="ju-ddescription"&gt;Lorem ipsum dolor sit amet, consetetur sad 
  dunt ut labore et dolore magna aipscing elitr, sed diam nonumy eirmod 
  tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
  voluptua&lt;/div&gt;--%&gt;
  &lt;/li&gt;
  &lt;li class="" style="display: none;"&gt;
  &lt;a href="" target="_self"&gt;
  &lt;img src="Home_files/slid3.png" alt=""&gt;
  &lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="" style="display: none;"&gt;
  &lt;a href="" target="_self"&gt;
  &lt;img src="Home_files/slide4.png" alt=""/&gt;
  &lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="" style="display: none;"&gt;
  &lt;a href="" target="_self"&gt;
  &lt;img src="Home_files/slide5.png" alt=""/&gt;
  &lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div style="display: block;" id="nav-dots294" class="nav-dots"&gt;
  &lt;span class=""&gt;&lt;/span&gt;  
  &lt;span class="nav-dot-current"&gt;&lt;/span&gt;
  &lt;span class=""&gt;&lt;/span&gt;
  &lt;span class=""&gt;&lt;/span&gt;
  &lt;span class=""&gt;&lt;/span&gt;  
  &lt;/div&gt;  
  
  &lt;/div&gt;
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  &lt;!-- end 3d slider --&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  &lt;!--      end slider     --&gt;
  </code></pre>