[Solved] Responsive Image Slider With Caption and 100% width and Custom height [closed]

by


Here is an alternative slider – much easier to use.
http://bxslider.com/

And here is a demo in jsfiddle that you can reference, it meets the same specs as your original with less overhead and much. I even set up your description divs.

<ul class="bxslider">
  <li>
      <img src="http://image-ling-goes-here.jpg" />
      <div class="slide-desc">
        <h2>Slider Title 1</h2>
        <p>description text... <a class="more" href="#">more</a></p>
      </div>
  </li>
// more slides go here
</ul>

Here is the super simple Jquery to set up the slider (link to all config options):

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

Make sure you follow the insructions and download/include references to the relevant JQuery libraries as well as the bx-slider library and css in your <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/js/jquery.bxslider.min.js"></script>
<link href="http://stackoverflow.com/lib/jquery.bxslider.css" rel="stylesheet" />

The styles i included in the fiddle are below with explanations of what they do:

body { margin: 0; padding: 0; } //removes silly body margin
.bx-wrapper .bx-viewport { border: none; left: 0; } //removes the bxslider 'polaroid-style' frame
ul.bxslider { margin: 0; padding: 0; } //fixes an alignment issues that crept in when the mode was set to fade
div.slide-desc { position: absolute; bottom: 5px; left: 50px; right: 50px; } //aligns your description block

0

solved Responsive Image Slider With Caption and 100% width and Custom height [closed]