jquery - Cycle2 轮播 - 奇怪的行为

Question

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

Answer 1

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

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

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

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

Fixed carousel