Cycle2 Carousel - Strange behaviour

Question

I have created a carousel using Cycle2 Carousel and you can see it here: http://jsfiddle.net/ktsixit/3BjHQ/

Notice two issues: 1) No matter what I do, the text inside h4 doesn't wrap. 2) Every time the carousel moves, the item that's sliding in isn't visible from the start, but gets visible after the slide animation is completed.

Can you help me fix these two issues?

Here's the HTML code:

<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>

And here's the 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

Your heading doesn't wrap as it is inheriting white-space: nowrap; from div.cycle-carousel-wrap - looks as if it is an inline style being added by the js (which is needed).

This can be fixed with:

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

Your glitchy effect is caused because you have floated your carousel items left (they get turned into inline-block elements so this isn't needed) - remove this style and it will work properly

Fixed carousel