[FIXED] How to install product carousel on homepage on Shopify Brooklyn Theme?

Issue

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!

Solution

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

Answered By - Onkar

Answer Checked By - Marilyn (PHPFixing Volunteer)