背景滑块无法正常工作

Question

我用以下代码为背景滑块和自动更改背景图像。但它不起作用，它在浏览器屏幕上显示为空白。所以请给我一些适合我的解决方案的解决方案。

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".slider-container").on("ready.fndtn.orbit", function(event) {
    $(this).css("visibility","visible");
  });
  $(document).foundation({
    orbit: {
      animation: 'fade',
      timer_speed: 8000,
      pause_on_hover: false,
      animation_speed: 600,
      navigation_arrows: false,
      slider_number: false,
      bullets: true,
      slide_number: false,
      swipe: true,
      autoplay: true
    }
  });
  var x = screen.height;
  $(".orbit-item,.slider-container").css({"height": x});
});

＆＃13;

.slider-container {visibility: hidden;}
.slider-4 {
  background: url(http://assets.limetray.com/assets/user_images/slider_images/cropped/Slider1_1442489216.jpg) center;
  background-repeat: no-repeat;
  background-size: cover;
}
.slider-1                                {
  background: url(http://assets.limetray.com/assets/user_images/slider_images/cropped/Slider2_1442489245.jpg) center;
  background-repeat: no-repeat;
  background-size: cover;
}


.slider-2                                {
  background: url(http://assets.limetray.com/assets/user_images/slider_images/cropped/Slider4test_1442565817.jpg) center;
  background-repeat: no-repeat;
  background-size: cover;
}


.slider-3                                {
  background: url(http://assets.limetray.com/assets/user_images/slider_images/cropped/Slidermugnew_1443247922.jpg) center;
  background-repeat: no-repeat;
  background-size: cover;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">

  <div class="bg-slider">
    <ul class="slider-container" data-orbit>

      <li class="orbit-item slider-1">
        <div class="orbit-caption bg_color_b color_a">
        </div>
      </li>


      <li class="orbit-item slider-2">
        <div class="orbit-caption bg_color_b color_a">
        </div>
      </li>


      <li class="orbit-item slider-3">
        <div class="orbit-caption bg_color_b color_a">
        </div>
      </li>


      <li class="orbit-item slider-4">
        <div class="orbit-caption bg_color_b color_a">
        </div>
      </li>

    </ul>


  </div>

＆＃13;

＆＃13;

＆＃13;