Display Carousel after loading

Question

Display Carousel after loading

Navigation

#1 by (2 votes)

0

I have two carousels on the page and while they are loading, they are broken. Only after they're right. I would like them to only be displayed, once loaded, but I can not.

window.onload = function() {
            $('#corpo-conteudo-imoveis1').fadeIn(1500)
            $("#pikame").PikaChoose({carousel:true, carouselVertical:true});
            $("#pikame2").PikaChoose({carousel:true, carouselVertical:true});
        };

javascript jquery carousel

asked by anonymous 08.09.2015 / 14:54

1 answer

Does not display the string, in C How to change array order javascript array

score 2 · Answer 1

Hello.

In the tool's own documentation it has a fadeThumbsIn option that reads as follows:

Enabling this will fade in the UL after PikaChoose has loaded. You must manually set the UL to display: none in your CSS for this to have an effect. $ ("# id"). PikaChoose ({fadeThumbsIn: true});

Documentation link

So I imagine you can do this:

window.onload = function() {
        $('#corpo-conteudo-imoveis1').fadeIn(1500)
        $("#pikame").PikaChoose({carousel:true, carouselVertical:true, fadeThumbsIn: true});
        $("#pikame2").PikaChoose({carousel:true, carouselVertical:true, fadeThumbsIn: true});
    };

Another option the tool offers is to use callbacks.

There is the buildFinished callback that says the following:

buildFinished: called as soon as PikaChoose is done building the slideshow

And he says that the way to use it is:

function myFunction (self) {console.log (self); } $ ("# id"). PikaChoose ({buildFinished: myFunction});

So in this case, you can start with all your hidden elements.

$("#pikame").hide();
$("#pikame2").hide();

And make your function show them, as follows (for example).

function habilitaSlideShow(self) {
     $(self).fadeIn();
}

window.onload = function() {
        $('#corpo-conteudo-imoveis1').fadeIn(1500)
        $("#pikame").PikaChoose({carousel:true, carouselVertical:true, buildFinished: habilitaSlideShow});
        $("#pikame2").PikaChoose({carousel:true, carouselVertical:true, buildFinished: habilitaSlideShow});
    };

More information on the API Hooks section of the link