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

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

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

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

你的毛刺效果是因为你已经漂浮了你的旋转木马项目（他们变成了内联块元素所以这是不需要的） - 删除这种风格，它将正常工作

Fixed carousel

Cycle2 Carousel - 奇怪的行为

1 个答案: