Skip to content
Advertisement

Slick Slider on Shopify Customize – Image Blocks Stacks Vertically Before Saving

I’m trying to create a slick slider for a shopify theme.. Slideshow where user can upload an image as a slide, those slides will work as blocks (basically slide’s coding is in forloop) It works actually but whenever user adds a 2nd block and uploads image on it, the images stack and when its saved in customize after adding, its works normally then.. I tried alot of stuff here and it seems that jquery doesn’t run when we add blocks, and when we save the theme, it refreshes the page so then that slick jquery works..

Advertisement

Answer

Got the solution for this, its working for me

$(function () {
    slick_slider();
});

$(document).on("shopify:section:load", function () {
    slick_slider();
});

$(document).on("shopify:section:unload", function () {
  slick_slider();
});

$(document).on("shopify:section:select", function () {
  slick_slider();
});

$(document).on("shopify:section:deselect", function () {
  slick_slider();
});

function slick_slider() {
  $(".slideshow__slick").not(".slick-initialized").slick({
    infinite: true,
    slidesToShow: 1,
    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>",
  });
}
Advertisement