gpt4 book ai didi

具有响应高度和宽度的 jQuery Cycle2 幻灯片

转载 作者:太空宇宙 更新时间:2023-11-04 13:54:45 24 4
gpt4 key购买 nike

我正在尝试使用 jQuery Cycle2 插件创建图像幻灯片,该插件将响应并调整到浏览器宽度 高度。我能够使用 Dynamic Container Sizing来自 Auto Height 的文档使宽度正常工作的功能。

看我做的 fiddle here ,这是我正在处理的网站构建的简化表示。

是否有可能以某种方式为幻灯片提供 .cycle-slideshow div 的 max-height:100%;

从广义上讲,我面临的问题是长肖像图像并不真正适合我的网站设计,用户必须滚动才能看到完整图像,这不是很好。

非常感谢。

最佳答案

这个有点晚了,但我会试一试。

假设所有图片的高度都不相同:这是一个小技巧,可以让您的容器始终保持相同大小,即使是不同尺寸的图像也是如此。

伪词:

  1. 让您的图片成为幻灯片的“背景”,而不是放置在其中。
  2. 向 CSS 添加 {background-size: cover}。
  3. 使用 Cycle2 的自定义模板来启动它。 (黑客?嗯,不是真的)

让我们获取一些新的 CSS 规则:

.cycle-overlay {
position:absolute;
bottom:auto;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
background:#333;
padding:0;
opacity:1
}
.banner-background {
width:100%;
height:100%;
background-position:center;
background-size:cover;
position:absolute;
top:0;
left:0;
z-index:10;
}
.cycle-slideshow {
width:100%;
max-height:400px;
background-position:center;
background-size:cover;
color:#fff;
overflow:hidden;
}

HTML

<div class="cycle-slideshow" 
data-cycle-slides='li'
data-cycle-fx='scrollHorz'
data-cycle-speed='700'
data-cycle-timeout='7000'
data-cycle-overlay-template="<div class=banner-background style=background-image:url(http://domain.tld/images/{{background}})></div>"
>
<ul>
<li data-cycle-background="slide1.jpg"></li>
<li data-cycle-background="slide2.jpg"></li>
<li data-cycle-background="slide3.jpg"></li>
</ul>
<div class="cycle-overlay"></div>
</div>

JS

$('.cycle-slideshow').on('cycle-before', function (opts) {
var slideshow = $(this);
var img = slideshow.find('.banner-background').css('background-image');
slideshow.css('background-image', img);
});

假设所有图片的高度相同:几个月前我写了一个关于将 animate.css 与 Cycle2 集成的示例

这不是您要查找的内容,但该示例提供了一个全 Angular 自动高度解决方案。

查看代码,您将获得所需的内容。

fiddle here !

此外,请记住 Cycle2您需要将额外的插件添加到中心幻灯片 jquery.cycle2.center.js

希望这对您有所帮助,干杯!

关于具有响应高度和宽度的 jQuery Cycle2 幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15765501/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com