responsive slider

achieved using bxslider.js from http://bxslider.com/

by Ali Khaled

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<ul class="bxslider">
  <li>
      <img src="http://lorempixel.com/1000/500/?765" />
      <div class="slide-desc">
        <h2>Slider Title 1</h2>
        <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
      </div>
  </li>
  <li>
      <img src="http://lorempixel.com/1000/500/?769" />
      <div class="slide-desc">
        <h2>Slider Title 2</h2>
        <p>Put your description here. Demo description here. <a class="more" href="#">more</a></p>
      </div>    
  </li>
  <li>
      <img src="http://lorempixel.com/1000/500/?768" />
      <div class="slide-desc">
        <h2>Slider Title 3</h2>
        <p>This is the third picture in the slider. <a class="more" href="#">more</a></p>
      </div>
  </li>
  <li>
      <img src="http://lorempixel.com/1000/500/?761" />
      <div class="slide-desc">
        <h2>Slider Title 4</h2>
        <p>Shorter description. <a class="more" href="#">read more</a></p>
      </div>
  </li>
</ul>

CSS

body { margin: 0; padding: 0; }
.bx-wrapper .bx-viewport { border: none; left: 0; }
ul.bxslider { margin: 0; padding: 0; }
div.slide-desc { position: absolute; bottom: 5px; left: 50px; right: 50px; }

JavaScript

$(document).ready(function(){
    $('.bxslider').bxSlider({
        mode: 'fade',
        adaptiveHeight: 'true'
    });
});