gpt4 book ai didi

jquery - Cycle2 轮播 - 奇怪的行为

转载 作者:行者123 更新时间:2023-12-01 02:55:40 25 4
gpt4 key购买 nike

我使用 Cycle2 Carousel 创建了一个轮播你可以在这里看到它: http://jsfiddle.net/ktsixit/3BjHQ/

注意两个问题:1)无论我做什么,h4内的文本都不会换行。2) 每次轮播移动时,滑入的元素一开始是不可见的,但在滑动动画完成后才可见。

你能帮我解决这两个问题吗?

这是 HTML 代码:

<div class="carousel_container">
<div class="slideshow" data-cycle-fx="carousel" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-carousel-visible="2" data-cycle-next="#next" data-cycle-prev="#prev">
<div class="carousel_item">
<img src="http://malsup.github.io/images/beach1.jpg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>

</div>
<div class="carousel_item">
<img src="http://malsup.github.io/images/beach2.jpg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>

</div>
<div class="carousel_item">
<img src="http://malsup.github.io/images/beach3.jpg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>

</div>
<div class="carousel_item">
<img src="http://malsup.github.io/images/beach4.jpg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>

</div>
<div class="carousel_item">
<img src="http://malsup.github.io/images/beach5.jpg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>

</div>
<div class="carousel_item">
<img src="http://malsup.github.io/images/beach6.jpg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>

</div>
<div class="carousel_item">
<img src="http://malsup.github.io/images/beach7.jpg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>

</div>
</div>
<div class="center"> <a href="#" id="prev">&lt;&lt; Prev </a>
<a href="#" id="next"> Next &gt;&gt; </a>

</div>
</div>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<script>
$.fn.cycle.defaults.autoSelector = '.slideshow';
</script>

这是CSS:

.sem_carousel_container {
width: 440px;
float: left;
}
.carousel_item {
width: 200px;
height: 250px;
float: left;
margin:10px;
background: #fff;
-webkit-box-shadow: 0px 0px 5px 1px rgba(50, 50, 50, 0.2);
-moz-box-shadow: 0px 0px 5px 1px rgba(50, 50, 50, 0.2);
box-shadow: 0px 0px 5px 1px rgba(50, 50, 50, 0.2);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
}

最佳答案

您的标题不会换行,因为它从 div.cycle-carousel-wrap 继承 white-space: nowrap; - 看起来好像是内联样式由js添加(这是需要的)。

这可以通过以下方式修复:

.cycle-carousel-wrap .carousel_item { white-space:normal; }

您的故障效果是因为您将轮播元素向左浮动而引起的(它们变成了内联 block 元素,因此不需要这样做) - 删除此样式,它将正常工作

Fixed carousel

关于jquery - Cycle2 轮播 - 奇怪的行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23295071/

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