I added CSS so first slide show up with other elements, but I think the image shows up with the original size and then working perfectly when page load up completely.

My css:

.home-slider-wrapper .item  {
    display: none;

.home-slider-wrapper .item:first-child  {
    display: block;

.home-slider-wrapper .slick-initialized .item {
    display: block;

My slider:

<div class="home-slider-wrapper">
<div id="header_slider" class="owl-carousel owl-theme owl-loaded">
<?php foreach ($bannerCollection as $banner): ?>
    <div class="item">
        <a href="<?php echo ($banner->getBannerLink()) ? $banner->getBannerLink() : "#"; ?>">
            <img class="desktop-image" src="<?php echo $baseUrl.$banner->getDesktopImg(); ?>" alt="<?php echo $banner->getBannerTitle(); ?>">
            <img class="mobile-image" src="<?php echo $baseUrl.$banner->getMobileImg(); ?>" alt="<?php echo $banner->getBannerTitle(); ?>">
<?php endforeach; ?>

and JS:

], function ($) {
        dots: true,
        autoplay: true,
        infinite: true,
        slidesToShow: 1,
        slideswToScroll: 1,
        arrows: true

I am adding screenshot for more understanding, during page load: enter image description here

after loading: enter image description here

1 Answer 1


I know it's an old question, but this worked for me in a similar situation on my site. You can use CSS for this.

    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;

.your-slider-class.slick-initialized {
    visibility: visible;
    opacity: 1;    

Hope this helps someone who facing the same issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.