[SOLVED]Set featured slideshow to show after page loads


#1

I have featured a posts slideshow on by blog which shows 3 posts horizontally at a time but when my blog loads it shows all 7 posts completely stretched vertically which looks very bad as all images got stretched up more than there pixel limits.

I want to make this slideshow appear on my blog after its completely loads or after my page completely loads.


#2

You can achieve that by keeping the featured slider hidden by default and showing it after the slider has successfully loaded.

First to hide the slider by default , add the following CSS (If you are confused where to add it, go into Template > Edit HTML , search for </head> tag and add the following before it)

<style>
    #featured {
        display:none;
    }
</style>

Now to make the slider visible after its content are loaded , search for the following code in your template

var i = e(".featured-slider");
i.length > 0 && i.owlCarousel({
    autoPlay: 2e4,
    slideSpeed: 300,
    navigation: !0,
    pagination: !1,
    items: 7,
    loop:true,
    itemsCustom: [
        [0, 1],
        [500, 2],
        [992, 3],
        [1200, 3],
        [1400, 4]
    ],
    navigationText: r,
})

In the above code , add the following part after navigationText , so that code will look like

var i = e(".featured-slider");
i.length > 0 && i.owlCarousel({
    autoPlay: 2e4,
    slideSpeed: 300,
    navigation: !0,
    pagination: !1,
    items: 7,
    loop:true,
    itemsCustom: [
        [0, 1],
        [500, 2],
        [992, 3],
        [1200, 3],
        [1400, 4]
    ],
    navigationText: r,
    afterInit : function(elem){
   document.getElementById('featured').setAttribute('style','display:block;');
    }
})

afterInit is a callback which is fired after the OWL Carousel (This is plugin your featured slider uses) is initialized


#3

Thank you, it worked the way i want it to be!