DEBUT THEME.. SLICK SLIDER - SLICK CENTER not working

Shopify Partner
38 0 0

HELLO.. im using debut themes..

debut themes has an SLICK SLIDER right?

my problem is ..  my slider not working on SLICK CENTER

i cant center the the slick-current  this is my PRINT SCREEN 

https://prnt.sc/j1su3y

..i think theres some edit on the VENDOR.js or THEME.js..

ANY ONE PLEASE HELP ME ON this 

thank's in advance

 

 

0 Likes
Shopify Partner
89 0 6

Hi Raniel,

I have reviewed the screenshot, If you have the basic knowledge about Javascript then you can update the script.

Please open below URL thare you can see the example of slick slider with center mode.
http://kenwheeler.github.io/slick/

Let us know if still facing any issue so we can help you.

Thanks
Aaron

1 Like
Shopify Partner
38 0 0

hellow sir .. thank you for the reply..

actually sir in my old theme that i use thats no built it slider.. i upload the slick.min.js and so on.. and its working fine with the center mode...

but on this case i use DEBUT THEME... in DEBUT THEME has built in slick slider..

this is vendor.js p.screen code https://prnt.sc/j1tjgs and this is theme.js p.screen https://prnt.sc/j1tlmo

i think theres something to edit that script. unfornately im not good :(

i KNOW you know this sir,,

thanks..

 

0 Likes
Shopify Partner
89 0 6

Hi Raniel,

Looking at "rrillon-test.myshopify.com", I am not able to find carousel in your current theme. Can you please provide working URL so I can get more idea about this issue?

1 Like
Shopify Partner
38 0 0

Ok sir this.. i already add a  working sample of slider

https://rrillon-test.myshopify.com/

 

this is my slick script ... look at the active slick-current,, its on the first slide.. it supposed to be on the middle right?

 $(document).ready(function(){
$('.trending_items').slick({
        centerMode: true,
        centerPadding: '50px',
        slidesToShow: 3,
        dots: true,
        arrows:false,
        autoplay:false,
        speed: 1500,
        autoplaySpeed:2100,
        cssEase: 'linear',
        responsive: [
          {
            breakpoint: 1200,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 3,
              infinite: true,
              dots: true
            }
          },
          {
            breakpoint: 767,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
          }
          // You can unslick at a given breakpoint now by adding:
          // settings: "unslick"
          // instead of a settings object
        ]
      });

 });

0 Likes
Shopify Partner
38 0 0

ITS OK NOW SIR... hehehehehhe thanks thanks.....

0 Likes
Shopify Partner
15 0 4

Did you get the responsive settings to work.  I'm finding they don't work on a thumbnail slider that I added to the home hero slider.  They also don't work on the product image thumbnails.  I'm using a modified version of the Debut theme.

0 Likes
Shopify Partner
2 0 0

In the vendor.js file, it calls the library "slick-slim.min.js" so I think the version of Slick Carousel that comes with the Debut theme is not meant to do anything fancy.

I had to replace it with the current version of Slick from github in order to get responsive to work.

0 Likes
Highlighted
Shopify Partner
221 0 13

@Michelle Darling: Didn't that mess up the original slideshow section it was originaly made for? I did update the slick code on the vendor.js as well and the responsive property started wroking for the carousel I build. But that messed up the slideshow section D: any ideas how to fish this? How did you fix the main slideshow section? 

Entrepreneur, Developer, Geek, Gamer and very passionate about WEB development! :P

Need help with your Shopify Store? Contact me: jfeuchter@gmail.com :D
0 Likes
Shopify Partner
2 0 0

Jurgen, I removed the function that handles the default slideshow from the theme javascript file and wrote my own function on each slideshow section template. If you have multiple slideshows on a page, you have to make sure you have specific classes/ids on each carousel so they can each get their own settings. So just make new section templates for each. I hope that makes sense. I'm kind of sleepy right now! 

0 Likes