Debut theme - show partial next slide

[lsotoangeldonis]

Currently on our store, on mobile we have styled our slider like this

But we would like to achieve something like this:

the portion of next slide shows up so the user knows there is more content to scroll

I have used the same shopify banner sliders on the past as you are using slickslider on your debut theme so I had setup this behavior on JS like this:

var settings = {
  dots: false,
  arrows: false,
  slide: '.slick-slideshow__slide',
  slidesToShow: 3,
  centerMode: true,
  centerPadding: '60px',
};

and also added the respective CSS but it's just not working

 But if I try to do the same thing outside shopify with the same code it works as you can see it here

https://codepen.io/ehsantl/pen/QKGroV

I'm I missing something?

[sfujihara]

Hey I'm not sure if you are still working on this, but let me comment cause I had the same issue and resolved it recently.

The reason why the centerMode doesn't work in Debut theme is that centerMode function isn't defined in Debut theme.

When we use slick library, usually we import it from CDN and every options (including centerMode) are defined there.

However in Shopify Debut theme, slick library isn't imported from CDN. It's defined in asset/vendor.js. You can find where it's defined by searching for "slick", and you will notice centerMode definition isn't there.

So, in order to enable centerMode in Debut theme, you need to add centerMode definition in somewhere. There are some ways to do it, but here is what I did.

1. Comment out slick.min part (which has 2k+ rows) in vendor.js.
   • It's easier to use prettier formatting before you make adjustment.
2. Copy slick.min.js from original library and paste it in vendor.js
3. Add centerMode setting to your js

In this way, I don't find any bugs so fat, but be careful not to cause bugs when you actually implement this.

Hope this helps.

Satoshi (twitter @stsfjhr)