Change Slides To Show Dynamically

gweiss27 commented 8 years ago

Hi there,

Love your carousel!

Question:

I would like to change the Sides to Show dynamically as a user resizes the viewport. So that 8 slides show on widescreens, but 6 or less show when making the window smaller. I created a scope variable for the slide to show and can set it initially on the inital viewport size. I also am detecting the resize event and the window size, but I'm not able to get the slick directive to actually change the slides to show when I make these changes.

Do you have any idea how this might be done?

Thanks!

Greg

jkbyln commented 8 years ago

Figured this out after struggling with it for a few days~

Turns out Slick.js has a setting called 'responsive' that's already supported by this plugin. You can pass in settings to change at different breakpoints.

Can be used like so:

<slick dots="false"
    slides-to-show="5"
    slides-to-scroll="5"
    ng-show="loaded"
    data="AdProducts"
    responsive="[{
        breakpoint: 1024,
        settings: { slidesToShow: 3, slidesToScroll: 3, }
    }, {
        breakpoint: 600,
        settings: { slidesToShow: 1, slidesToScroll: 1 }
    }]">

gweiss27 commented 8 years ago

Yes, I figured it out to after much research. Would be nice to have this front and center in their docs. But I got it to work as well. Thanks for the response!

From: Jake notifications@github.com Reply-To: vasyabigi/angular-slick reply@reply.github.com Date: Saturday, January 16, 2016 at 7:57 AM To: vasyabigi/angular-slick angular-slick@noreply.github.com Cc: Gregory Weiss gweiss27@gmail.com Subject: Re: [angular-slick] Change Slides To Show Dynamically (#135)

Figured this out after struggling with it for a few days~

Turns out Slick.js has a setting called 'responsive' that's already supported by this plugin. You can pass in settings to change at different breakpoints.

Can be used like so: <slick dots="false" slides-to-show="5" slides-to-scroll="5" ng-show="loaded" data="AdProducts" responsive="[{ breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1 } }]"> — Reply to this email directly or view it on GitHub.

alexswiontek commented 8 years ago

I've found that using dynamic data causes a flash of angular logic before the slider starts, and that using ngCloak will fix that. Like so:

<slick ng-cloak></slick>

Not sure if this was mentioned elsewhere, but it helped me out—hopefully it can help someone else out as well. Good to note that in order for this to work, the script for Angular must be loaded in the <head>.

vasyabigi / angular-slick

Change Slides To Show Dynamically #135