slick-slider-carousel is not responsive on my website

UPDATE:

I have updated to the latest version of WordPress 4.4.2

The carousel now resizes with the browser but the image heights become inconsistent with big gaps between images. All images are sized to 600px high so i don’t understand why they change to different heights when the browser is scaled down to a smaller size.

I am having the same issue that you are having the images become incredibly narrow. I think you might have to edit this in css seeming as how this is a native issue with the plugin.

I have looked into the CSS using Firebug and found that for whatever reason when you upload images to WordPress (or is it my theme?) it automatically creates resized versions (assuming for responsive theme reasons). This resizes images by set pixel sizes based on the long side of the images. Slick Slider is then displaying these resized versions when the browsers are smaller and therefore the images are the same size along the long side. This means that they no longer have the same heights and this creates the problem.

Is this down to my theme? Or is there any way around this?

Hello,

Can you please send us your website Link?

Thanks

Here’s my carousel on my website:

https://www.alexbradbury.co.uk/test/

Website homepage:

https://www.alexbradbury.co.uk

Any luck with looking into this?

Hello,

We are working on plugin an fixing he bug his this because WorPress taking different size of image when its responsive. Kindly give us 2 working days.

Thanks

Thank you!

Any update on this?

Hello Bradbury,

We are updating our all plugin and fixing some bugs. Kindly give us some time to check the slick slider plugin and send you the updates.

Thanks

I have the same problem, how I can implement responsive breakpoints on my WP sait, like this (kenwheeler.github.io/slick):

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  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
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

Hello,

We have added only 3 predefined breakpoints for the FREE version. Planing to add dynamic breakpoints in the PRO version.