CODEWITHSUNDEEP
javascriptcarouselcaroufredsel
Shahor
Shahor

Reputation: 415

Carousel adds a useless margin-right to last element

I'm having a problem with caroufredsel that I don't know how to resolve.

Here's the code I use for my carousel : 

$("#list" + _i).carouFredSel({
                width: '100%',
                align: 'left',
                items: {
                    visible: 5,
                    width: 'auto'
                },
                scroll : {
                    items: 1,
                    duration: 400,
                    fx: "scroll"
                },
                auto: false,
                next: "#right" + _i
            });

And here's the result : result

As you can see there's an awful margin-right set to one of the elements that breaks the whole thing. I can't figure what is causing this =/

Obviously, it works like a charm when I remove that margin :

charm

I suppose this margin is here because otherwise we would see partial images in the carousel. But I want it to be that way.

Halp ?

Version of caroufredsel : Latest

Upvotes: 1

Views: 472

Answers (2)

Etienne Dupuis
Etienne Dupuis

Reputation: 13796

I had the same problem. It was whitespace the problem for me. Thanks for pointing me to the right direction.

I use comments to eliminate whitespaces and keep my code clean: 

       <div class="bannerquisommesnous"><!--
            --><img src="banner-etienne1.jpg" /><!--
            --><img src="banner-mylene1.jpg" /><!--
            --><img src="banner-jen1.jpg" /><!--
            --><img src="banner-etienne2.jpg" /><!--
            --><img src="banner-mylene2.jpg" /><!--
            --><img src="banner-jen2.jpg" /><!--
            --><img src="banner-etienne3.jpg" /><!--
            --><img src="banner-jen6.jpg" /><!--
        --></div>

Upvotes: 1

Shahor
Shahor

Reputation: 415

So I found the problem. The lib wasn't the problem at all. Some empty nodes were inserted in the DOM along with the other good ones and they were treated as if they had the same width as the images (good nodes then).

It resulted in the carousel's width being too large and then having a messed up behavior.

Everything is well now :)

Upvotes: 0

Related Questions