CODEWITHSUNDEEP
jqueryhtmlcsscaroufredsel
Ravimallya
Ravimallya

Reputation: 6610

caroufredsel not visible until browser resize

I'm having an issue with caroufredsel a jquery carousel plugin which I used in an Asp.net Webforms. The carousel is not displaying until I resize the window. I can see the issue in latest version of Google Chrome and in Firefox.

Javascript 

$(window).load(function() {
    $("#slider").carouFredSel({
            circular: true,         
            infinite: true,         
            responsive: true,      
            direction: "left",    
            width: "100%",
            height: "auto",
            auto: true,
            align: "center", 
            padding:0,
            items: {
                visible: 2,
                minimum: 2,
                width: "variable",
                height: "100%"
            },
            scroll: {
                items:1,
                pauseOnHover:true
            }
        });
    });

CSS 

#slider .slider-wrapper {
    position:relative !important;
    display: block;
    padding-right: 10px;
    float: left;
    width:554px;
}

.... all other related to design

I am able to duplicate the issue when I create a replica in JSbin. Fullscreen preview goes here http://jsbin.com/uyewewo/3

Upvotes: 2

Views: 1746

Answers (1)

miguel-svq
miguel-svq

Reputation: 2176

If you want a fast patch, just fire a resize after creating the carousel adding

$( window ).resize()

at the end of your $(window).load(function(){

Upvotes: 5

Related Questions