Jquery 具有标题、100%宽度和自定义高度的响应式图像滑块

我有一个任务，我需要显示一个带有文字标题的图像滑块，我在每个图像和jquery动画淡入效果中写入这些文字标题。对于所有屏幕大小，滑块的宽度应为100%，并应采用图像的自定义高度。 相信我，我花了一整天的时间试图得到一个好的解决方案，但是没有找到任何能够完全满足我要求的插件。我得到的解决方案就像他们没有宽度和高度的兼容性以及其他具有过渡动画效果的插件一样

---

请帮助我获得解决方案。任何指向我的链接对我来说都是一个很好的开始。

这里有一个可供选择的滑块-更易于使用。

这里有一个，您可以参考，它满足与原始版本相同的规格，并且开销更少，而且更安全。我甚至设置了你的描述组

<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>

确保按照说明进行操作，并在

中下载/包括对相关JQuery库以及bx滑块库和css的引用：

---

让我们看看你说你投入了多少努力。。。分享你所使用的使你接近你想要实现的目标的东西，我们可以帮助你调整它。@JRulle请参考我的小提琴链接。在这个链接中，我必须将图像滑块conatiner的高度固定为

860px

并删除后续下侧div中多余的空白（间隙）。如果你能在这方面帮助我，你将是一个生命救世主。我尽了最大努力但未能破解。@JRulle请帮帮我。@JRulle请帮帮我这个兄弟。。你将是一个生命的救世主。请求求你，问题其实远不止于此。。。

元素得到绝对定位，以促进淡入/淡出效果。这会导致它们脱离文档流，而动态调整大小的方法（如

height:auto

和

overflow

基本上会忽略这些元素。修复这将需要更多的时间，我必须提供。。。很抱歉

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

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

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