Estoy tratando de crear un control deslizante ingenioso para un tema de Shopify. Presentación de diapositivas donde el usuario puede cargar una imagen como una diapositiva, esas diapositivas funcionarán como bloques (básicamente, la codificación de la diapositiva está en forloop) En realidad, funciona, pero cada vez que el usuario agrega un segundo bloque y carga la imagen en él, las imágenes se apilan y cuando se guardan en personalizar después de agregar, funciona normalmente entonces. Probé muchas cosas aquí y parece que jquery no se ejecuta cuando agregamos bloques y cuando guardamos el tema , actualiza la página para que funcione jquery.
Tengo la solución para esto, está funcionando para mí.
$(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>", }); }