1

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(); ?>">
        </a>
    </div>
<?php endforeach; ?>
</div>
</div>

and JS:

require([
    'jquery',
    'slickSlider'
], function ($) {
    $("#header_slider").slick({
        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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.