Magento – Slick slider: Image size issue on page load

banner-sliderloadingslickslider

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:

after loading:

Best Answer

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.

.your-slider-class{
    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.

Related Solutions

How to Apply Slick Slider to Magento

I don't know what to do with the Slick directory

As per Magento best practices, you should put this slider folder under skin directory. However puting this under lib folder is also fine and will work. But I recommend skin directory.

So put your css js files in skin\frontend\[package]\[theme]\slick_slider\*

How can I apply those Js and Css into my module

Next step is to define layout update xml file inside your module. For this add this snippet inside your module's config.xml file.

<config>
    <frontend>
        <layout>
            <updates>
                <{namespace_module}>
                    <file>{namespace_module}.xml</file>
                </{namespace_module}>
            </updates>
        </layout>
    </frontend>
</config>

Now use your this file to add slider specific files (css and js) to head section

File : app\design\frontend\[package]\[theme]\layout\{namespace_module.xml}

<layout>
    <{layout_update_handle_you_need}>
        <reference name="head">
            <action method="addItem">
                <type>skin_css</type>
                <item>slick_slider/slick.css</item>
            </action>
            <action method="addItem">
                <type>skin_css</type>
                <item>slick_slider/slick-theme.css</item>
            </action>
            <!-- add jquery if not present -->
            <action method="addItem">
                <type>skin_js</type>
                <item>slick_slider/slick.min.js.css</item>
            </action>
        </reference>
    </{layout_update_handle_you_need}>
</layout>

Now put html and script specific for the slider in any one of the template file of your module.

Hope that helps

Magento 2 Slick Slider – Slick Slider Function Not Working

Actually one of possible reason why it may not properly working because you don't add the slick after ajax success response. You just need to replace this, with your js code

require([
    'jquery',
    'magiccart/slick',
    'alothemes'
    ], function($, slick){
    jQuery.ajax({
        url: "/manufacturerpages/index/collection",
        type: "POST",
        data: "id= <?php echo $manpagedataarr['page_id']; ?>&categoryid=<?php echo $categoryid; ?>&carouselorder=<?php echo $manpagedataarr['carouselorder']; ?>&collection_type=<?php echo $manpagedataarr['collection_type']; ?>&product_ids=<?php echo $manpagedataarr['product_ids']; ?>&manufacturer=<?php echo $manpagedataarr['manufacturer']; ?>",
        success: function (res) {
            //console.log(res);
            var result = jQuery('.product-items', res).html();
            var undefined = false;
            if(typeof result === 'undefined'){
                result = res;
                undefined = true;
            }

            jQuery(".featured-collector_<?php echo $categoryid; ?>").html(result);
            jQuery(".landing-featured .ajax_loading").hide();

            // ******This is your slick code***********
             jQuery('.featured-collector_<?php echo $categoryid; ?>').slick({
                    dots: false,
                    infinite: true,
                    slidesToShow: 6,
                    slidesToScroll: 2,
                    arrows: true,
                    autoplay: false,
                    draggable: true,
                    speed: 300
            });
            jQuery( "form[data-role='tocart-form']" ).catalogAddToCart();
        }

    });
});

I hope this will help

Best Answer

Related Solutions

How to Apply Slick Slider to Magento

Magento 2 Slick Slider – Slick Slider Function Not Working

Related Topic