我有一个任务需要显示带有一些文本标题的Image滑块,该滑块在每个图像中都写入并且jquery动画淡入效果。对于所有屏幕尺寸,该滑块的宽度应为100%,并且应采用图像的自定义高度。相信我,我一整天都在尝试以获得良好的解决方案,但是没有找到能够完全满足我要求的插件。我得到的解决方案就像它们没有宽度和高度兼容性以及其他具有Transition动画效果的解决方案一样。
请帮助我获得解决方案。任何指向我的链接对我来说都是一个很好的开始。
这是一个替代滑块-易于使用。http://bxslider.com/
这是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>
这是设置滑块的超级简单的Jquery(链接到所有配置选项):
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
adaptiveHeight: 'true'
});
});
确保遵循指示,并下载/包含对相关JQuery库以及bx-slider库和css的引用<head>
:
<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
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句