JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/plugins/foundation.orbit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css">
<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>

CSS

/*.slider-container {visibility: hidden;}*/
.orbit-item{
  min-width:500px;
  min-height:500px;
}
.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;
}

JavaScript

$(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});
});