<ul id="lightSlider">

  <li>
    <div class="lightSlider-image-wrapper">
      <a href="#">
        <div class="lightSlider-image" title="Image Title" style="background-image:url(https://scontent.ftpa1-2.fna.fbcdn.net/v/t1.0-9/13230159_10154894928032586_8610033615085830486_n.jpg?_nc_cat=0&oh=5b028e43e10cc683adefd22678506c78&oe=5BD102EA);"></div>
      </a>
    </div>
    <div class="lightSlider-text">
      Lorem ipsum dolor sit amet.
    </div>
  </li>
  
  <li>
    <div class="lightSlider-image-wrapper">
      <a href="#">
        <div class="lightSlider-image" title="Image Title" style="background-image:url(https://scontent.ftpa1-2.fna.fbcdn.net/v/t1.0-9/37574466_10215878599815061_6979403275695030272_n.jpg?_nc_cat=0&oh=78adf4086bab1fd92df7ca4f0cf4a6c5&oe=5BCFC235);"></div>
      </a>
    </div>
    <div class="lightSlider-text">
      Lorem ipsum dolor sit amet. This box is going to have more text than the first one.
    </div>
  </li>
  
  <li>
    <div class="lightSlider-image-wrapper">
      <a href="#">
        <div class="lightSlider-image" title="Image Title" style="background-image:url(https://scontent.ftpa1-2.fna.fbcdn.net/v/t1.0-9/37702467_10157615865567586_4011979545908346880_n.jpg?_nc_cat=0&oh=cd9e7c2587732ff9b1135357415fb029&oe=5C0DA93B);"></div>
      </a>
    </div>
    <div class="lightSlider-text">
      Lorem ipsum dolor sit amet. This box is going to have more text than the first one.
    </div>
  </li>
  
   <li>
    <div class="lightSlider-image-wrapper">
      <a href="#">
        <div class="lightSlider-image" title="Image Title" style="background-image:url(https://scontent.ftpa1-2.fna.fbcdn.net/v/t1.0-9/37720913_10157612687787586_5680493092508008448_n.jpg?_nc_cat=0&oh=4889b0695d1e7aff91fdff64faf44a7f&oe=5BD89BC7);"></div>
      </a>
    </div>
    <div class="lightSlider-text">
      Lorem ipsum dolor sit amet.
    </div>
  </li>

</ul>
.lightSlider li {
  border-bottom: 3px solid #E75521;
}

.lightSlider-image {
  height: 500px;
}

.lightSlider-text {
  padding: 30px;
  min-height: 200px;
}
$(document).ready(function() {
    $("#lightSlider").lightSlider({
        item: 2,
        slideMove: 1,
        adaptiveHeight:true
    });
});

External CSS

  1. //cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.5/css/lightslider.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.5/js/lightslider.min.js