Question

我有一个任务，我需要显示一个带有一些文字标题的图像滑块，我在每个图像中写入和jquery动画淡化效果。对于所有屏幕尺寸，滑块应该是100％宽度，它应该采取自定义高度图像。相信我，我尝试了一整天来获得良好的解决方案，但没有找到任何插件，这将完全填满我的要求。我得到的解决方案就像他们没有宽度和高度兼容性和其他与过渡动画效果。

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

Answer 1

这是一个替代滑块 - 更容易使用。 http://bxslider.com/

这是一个你可以参考的 demo in jsfiddle ，它符合与原版相同的规格，而且开销更少。我甚至设置了你的描述div。

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

这是设置滑块（link to all config options）的超级简单Jquery：

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

确保您遵循这些文章，并在<head>中下载/包含对相关JQuery库以及bx-slider库和css的引用：

<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

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

1 个答案: