带有标题,100%宽度和自定义高度的自适应图像滑块

用户名

我有一个任务需要显示带有一些文本标题的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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

带有自动滑动和按钮的自定义 jquery 图像滑块中的 setInterval 问题

来自分类Dev

自适应网站-带有图像的滑块内容不适合移动视口

来自分类Dev

带有自定义标题的 TUpDown 和 TEdit

来自分类Dev

带有文字叠加的自适应图像

来自分类Dev

自适应将宽度和高度设置为80%

来自分类Dev

一页中有多个Facebook,Twitter共享按钮,带有自定义图像和标题

来自分类Dev

带有图像和标签的自定义UITableViewCell

来自分类常见问题

带有自定义帖子的多图像/滑块[single.php]

来自分类Dev

带有自定义帖子的多图像/滑块[single.php]

来自分类Dev

具有预定义的宽度和高度的自定义可编辑文本字段

来自分类Dev

xcode 7和自适应布局中的自定义字体

来自分类Dev

以自适应宽度和固定纵横比显示图像

来自分类Dev

将CSS自适应图像的宽度和高度与Google结构化数据一起使用

来自分类Dev

带有carouFredSel.js的自适应全宽度轮播

来自分类Dev

在Windows 8中自定义自适应亮度

来自分类Dev

如何在 WebChat 中自定义自适应卡片?

来自分类Dev

如何设置角度模态自定义高度和宽度

来自分类Dev

自定义jQuery UI Slider的高度和宽度

来自分类Dev

设置自定义对话框的高度和宽度

来自分类Dev

bxSlider图片自定义高度和宽度

来自分类Dev

创建自定义 AlertDialog Box 高度和宽度

来自分类Dev

具有自定义拇指图像和文本的滑块

来自分类Dev

分享带有自定义标题,图像,描述的网页帖子

来自分类Dev

带有CSS的自适应图像,可用于较小的屏幕

来自分类Dev

带有背景图像的自适应svg clipPath

来自分类Dev

如何设置带有图像的UIButton的高度和宽度

来自分类Dev

如何设置带有图像的UIButton的高度和宽度

来自分类Dev

带有自定义标题和消息等的Facebook分享按钮

来自分类Dev

带有自定义标题和消息等的Facebook分享按钮

Related 相关文章

  1. 1

    带有自动滑动和按钮的自定义 jquery 图像滑块中的 setInterval 问题

  2. 2

    自适应网站-带有图像的滑块内容不适合移动视口

  3. 3

    带有自定义标题的 TUpDown 和 TEdit

  4. 4

    带有文字叠加的自适应图像

  5. 5

    自适应将宽度和高度设置为80%

  6. 6

    一页中有多个Facebook,Twitter共享按钮,带有自定义图像和标题

  7. 7

    带有图像和标签的自定义UITableViewCell

  8. 8

    带有自定义帖子的多图像/滑块[single.php]

  9. 9

    带有自定义帖子的多图像/滑块[single.php]

  10. 10

    具有预定义的宽度和高度的自定义可编辑文本字段

  11. 11

    xcode 7和自适应布局中的自定义字体

  12. 12

    以自适应宽度和固定纵横比显示图像

  13. 13

    将CSS自适应图像的宽度和高度与Google结构化数据一起使用

  14. 14

    带有carouFredSel.js的自适应全宽度轮播

  15. 15

    在Windows 8中自定义自适应亮度

  16. 16

    如何在 WebChat 中自定义自适应卡片?

  17. 17

    如何设置角度模态自定义高度和宽度

  18. 18

    自定义jQuery UI Slider的高度和宽度

  19. 19

    设置自定义对话框的高度和宽度

  20. 20

    bxSlider图片自定义高度和宽度

  21. 21

    创建自定义 AlertDialog Box 高度和宽度

  22. 22

    具有自定义拇指图像和文本的滑块

  23. 23

    分享带有自定义标题,图像,描述的网页帖子

  24. 24

    带有CSS的自适应图像,可用于较小的屏幕

  25. 25

    带有背景图像的自适应svg clipPath

  26. 26

    如何设置带有图像的UIButton的高度和宽度

  27. 27

    如何设置带有图像的UIButton的高度和宽度

  28. 28

    带有自定义标题和消息等的Facebook分享按钮

  29. 29

    带有自定义标题和消息等的Facebook分享按钮

热门标签

归档