Cycle2 Carousel - 奇怪的行为答案

【问题标题】：Cycle2 Carousel - Strange behaviourCycle2 Carousel - 奇怪的行为
【发布时间】：2014-04-25 22:26:38
【问题描述】：

我使用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;
}

【问题讨论】：

标签： jquery css jquery-cycle

【解决方案1】：

您的标题没有换行，因为它从 div.cycle-carousel-wrap 继承 white-space: nowrap; - 看起来好像是 js 添加的内联样式（这是必需的）。

这可以通过以下方式解决：

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

您的故障效果是因为您将轮播项目向左浮动（它们变成了内联块元素，因此不需要这样做） - 删除此样式，它将正常工作

Fixed carousel

【讨论】：