How to install product carousel on homepage on Shopify Brooklyn Theme?

Question

I am trying to change the featured product to a carousel on the homepage on Shopify - Brooklyn theme. I followed some instructions here which was supposed to work on the Brooklyn theme: https://www.youtube.com/watch?v=r7I3T4wB2cQ

However the carousel came up vertical when I installed it. Here is my store: http://sacredcoffeeco.com -- the carousel is at the bottom of the page.

Does anyone know how to make the slider horizontal?

Thank you!

Answer 1

It seems you don't init slider JS to newly created HTML, you need to add the code to your theme.js.liquid and also need some changes to CSS code to design purpose.

$('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
      }
    }    
  ]
});