如何在 Shopify 布鲁克林主题的主页上安装产品轮播？

Question

我正在尝试将特色产品更改为 Shopify - 布鲁克林主题主页上的轮播。我在这里遵循了一些应该适用于布鲁克林主题的说明：https://www.youtube.com/watch?v=r7I3T4wB2cQ

但是，当我安装它时，旋转木马是垂直的。这是我的商店：http://sacredcoffeeco.com -- 轮播位于页面底部。

有谁知道如何使滑块水平？

谢谢！

Answer 1

您似乎没有为新创建的 HTML 初始化滑块 JS，您需要将代码添加到您的 theme.js.liquid 并且还需要对 CSS 代码进行一些更改以达到设计目的。

$('ul.slick').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 3,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }    
  ]
});