Почему на работает breakpoint?

Question

[Aleks Kirilov]

$(".reviews-slider").slick({
    arrows: false,
    dots: false,
    slidesToShow: 2,
    slidesToScroll: 1,
    inifite: true,
    centerMode: true,
    centerPadding: "150px",
    responsive: [
      {
        breakpoint: 1275,
        settings: {
          arrows: false,
          centerMode: false,
          centerPadding: "100px",
          slidesToShow: 1
        }
      },
      {
        breakpoint: 450,
        settings: {
          arrows: false,
          centerMode: true,
          slidesToShow: 1
        }
      }
    ]
  });

В итоге не работает на устройствах с маленьким экраном
Где ошибка

Answer 1

[approximate solution]

Enabling "Mobile First" option within settings (which swaps to min-width responsive approach)
Changed default value of "Slides to show" to 1 (for mobile)
Add min-width responsive breakpoints for tablet and desktop, setting "Slides to show" to 2 and 3, respectively

Попробуйте включить mobilefirst, и прописать брейкпоинты в обратную сторону. Был такой косяк у слик.

Comments

[Aleks Kirilov]

Что такое Mobilefirst?

[approximate solution]

$(function() {
    $('.carousel').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
        mobileFirst: true, --------------------------------------------// mobileFirst
        arrows: false,
        dots: true,
        responsive: [
            {
                breakpoint: 769,
                settings: 'unslick'
            }
        ]
    });

    $(window).on('resize', function() {
        $('.carousel').slick('resize');
    });
});

Это значит ваш slider начинает работать от меньшего разрешения к большему. Т.е не max-width, а min-width.

[Aleks Kirilov]

Спасибо

[approximate solution]

Aleks Kirilov, проверьте хоть, заработает или нет, перед тем как отмечать решением.

[Aleks Kirilov]

Заработало, спасибо)

[approximate solution]

Aleks Kirilov, удачи)