CODEWITHSUNDEEP
javascriptjqueryhtmlcsscaroufredsel
Tim
Tim

Reputation: 3059

CarouFredSel Transition Issue

I'm using CarouFredSel for an image carousel, and I'm having an issue with the transitions between items.

I want to use some simple HTML in the carousel rather than plain old images, but when I do, the swipe transition doesn't work. While the old image slides out, the new image flashes in rather than sliding in and you can see the background briefly in between images. 

<div id="carousel">         
    <div>
        <img src="img/instagram1.png">
        <div style="position:relative; z-index:100; bottom:20px;">Byline 1</div>
    </div>
    <div>
        <img src="img/instagram2.png">
        <div style="position:relative; z-index:100; bottom:20px;">Byline 2</div>
    </div>
</div><!-- /carousel -->

As you can see from this JSFiddle, the transition effect works fine with just images, but it looks off when using HTML.

Upvotes: 1

Views: 570

Answers (1)

Tim
Tim

Reputation: 3059

It turns out that all you have to do to fix this is apply a left float on the items like this:

#carousel div {
   display: block;
   float: left;
}

Upvotes: 2

Related Questions