CODEWITHSUNDEEP
javascriptjqueryshopifyliquidslick.js
Vaishnavi Sawant
Vaishnavi Sawant

Reputation: 41

Slick Slider doesn't work with shopify dawn's product recommendation section

I'm trying to show 6 products in product recommendation section and I want to show them in a slider. I use slick slider to create all my sliders but at this its not working, the slick slider doesn't initialize and my slick code is perfect, what can go wrong? here's my code..

slick js 👇🏻

$(".product_recommendation_slick").not(".slick-initialized").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,
    prevArrow:
        "<div class='slick-prev'><i class='fas fa-angle-left'></i></div>",
    nextArrow:
        "<div class='slick-next'><i class='fas fa-angle-right'></i></div>",
    autoplay: false,
    responsive: [
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
            }
        },
        {
            breakpoint: 420,
            settings: {
                slidesToShow: 1
            }
        }
    ],
});

product-recommendation.liquid 👇🏻

<div class="row product_recommendation_slick">
   {% for recommendation in recommendations.products %}
      {% render 'product-card',
         product_card_product: recommendation
      %}
   {% endfor %}
</div>

Upvotes: 1

Views: 1414

Answers (2)

viraj Chaudhary
viraj Chaudhary

Reputation: 126

You can use the below code setTimeout function help to call a slick function after 3 seconds

$(document).ready(function () {
    setTimeout(function () {

$(".product_recommendation_slick").not(".slick-initialized").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,
    prevArrow:
        "<div class='slick-prev'><i class='fas fa-angle-left'></i></div>",
    nextArrow:
        "<div class='slick-next'><i class='fas fa-angle-right'></i></div>",
    autoplay: false,
    responsive: [
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
            }
        },
        {
            breakpoint: 420,
            settings: {
                slidesToShow: 1
            }
        }
    ],
});
}, 3000); // Change the delay time (in milliseconds) as needed
});

Upvotes: 0

Genevi&#232;ve M.
Genevi&#232;ve M.

Reputation: 260

Your code is probably not working because the DOM elements are not yet created when you look for them. Run your code after the window is fully loaded by using the window:

fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images.

// vanilla JS
window.addEventListener("load", (event) => {});
window.onload = (event) => {};

// JQuery
$(window).on('load', function() { })

fired as soon as the page DOM has been loaded, without waiting for resources to finish loading

// vanilla JS
window.addEventListener('DOMContentLoaded', (event) => {});
window.onDOMContentLoaded = (event) => { };

// JQuery    
$(window).on('ready', function() { })

Upvotes: 1

Related Questions