Как преобразовать статичный контент в слайдер при смене разрешения?

Question

[mydarck]

Есть контейнер с элементами:

<div class="container">
  <div class="slider">
    <div class="item-element"></div>
    <div class="item-element"></div>
    <div class="item-element"></div>
    <div class="item-element"></div>
    <div class="item-element"></div>
    <div class="item-element"></div>
  </div>
</div>

При обычном разрешении экрана ( > 1200 ) на одну строку уменьшается 3 дочерних элемента, остальные переносят на вторую строку. При другом разрешение, допустим на планшетах ( 992px к примеру ) нужно, чтобы див с классом slider, становился слайдером и выводил по 2 дочерних элемента.
Для данной задачи я решил использовать slick slider, т.к. у него есть замечательное свойство responsive и с помощью breakpoint я могу задать любую точку изменения свойств слайдера. Однако, я не знаю как заставить его не применять никаких свойств к большому разрешению ( > 1200 ).
Если сразу начать с responsive в настройках слайдера:

$(".slider").slick({
	responsive: [
		{

			breakpoint: 992,
			settings: {
				slidesToShow: 2,
				dots: true
			}
		},
		{
			breakpoint: 768,
			settings: {
				slidesToShow: 1,
				dots: true
			}
		},
	]

});

, то он это не заставит игнорировать большое разрешение, а лишь применит к нему дефолтные настройки и выстроит дочерние элементы в строку. Такая же ситуация если в дефолтных настройках указать максимальное количество дочерних элементов - он выведет их всех. В идеале нужно чтобы слайдер начинал работать только с определенного разрешения. Как этого добиться?

Answer 1

[Сергей Маргелов]

Для тех, кто найдёт этот вопрос (я сомневаюсь, что автору ещё актуально):
В slick-slider есть опция mobilefirst, которая заставляет работать брэйкпоинты в другую сторону. После нужного вам разрешения просто отключайте слайдер.

Answer 2

[Дмитрий Пыркин]

взять какой нибудь слайдер и подключать его при нужном разрешение

Comments

[mydarck]

спс, отличный ответ!

[Дмитрий Пыркин]

if($(window).size() < 1200){
$(".slider").slick({
  responsive: [
    {

      breakpoint: 992,
      settings: {
        slidesToShow: 2,
        dots: true
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 1,
        dots: true
      }
    },
  ]

});
}