Как удалить несколько последних слайдов в слайдере Slick

Задача – выводить в десктопной версии несколько слайдов с определенным дизайном, а в мобильной версии выводить больше слайдов с другим дизайном.

Нашел одно решение – добавляем слайдам для моб. версии отдельный класс, и для моб. версии задаем свои стили, а при проверке на ширину экрана в случае десктопной версии удаляем мобильные слайды. А при мобильной версии выводим все слайды, и стили для них задаем с помощью CSS.

Рабочий пример удаления последних слайдов:

See the Pen Remove last slides from Slick carousel for desktop version by Denis (@deniscreative) on CodePen.dark

Удаление слайдов выполняется один раз при загрузке скрипта, то есть при изменении ширины экрана без перезагрузки страницы никакие действия со слайдером не производятся. Чтобы проверить Как работает скрипт в окне Codepen включите вкладку JS, SCSS или HTML и нажмите кнопку Rerun, чтобы скрипт загрузился еще раз для новой ширины экрана.

Ожидаемый результат:

• на широком экране выводится 5 слайдов, слайды для моб версии удалены;
• на малом экране выводятся все слайды (8 шт.), ничего не удалено.

Код нашего скрипта:

$(".carousel").slick({
  dots: true,
  infinite: false // IMPORTANT
});

if (window.matchMedia("(min-width: 769px)").matches) {
  var $slideSmCount = $(".item_sm").length;

  for (var i = 0; i < $slideSmCount; i++) {
    $(".carousel").slick("slickRemove", false);
  }
}

Разберем код для удаления слайдов из слайдера Slick

Для слайдов, которые нужно скрыть на десктопе задаем класс .item_sm.

infinite: false – обязательная опция, отключаем зацикленность слайдера, иначе скрипт не сможет найти последний слайд, с которого нужно начать отсчет для удаления.

Проверяем ширину экрана, и выполняем необходимый код, если ширина экрана меньше заданной:

if (window.matchMedia("(min-width: 769px)").matches) { }

Вычисляем, сколько всего элементов помечены мобильным классом .item_sm:

var $slideSmCount = $(".item_sm").length;

Запускаем цикл, который удаляет последний слайд, пока не удалит количество слайдов равное количеству мобильных слайдов $slideSmCount:

for (var i = 0; i < $slideSmCount; i++) {
  $(".carousel").slick("slickRemove", false);
}

Если ширина экрана не подпадает под параметры выше, то слайдер будет работать со всеми слайдами и ничего удаляться не будет.

Небольшое дополнение:

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

function getLastSlide() {
  return $(".carousel").slick("getSlick").slideCount - 1;
}

и затем удаляем указанный по счету слайд:

$(".carousel").slick("slickRemove", getLastSlide());

Пример получился интересный.=) Но по итогу, на проекте я использовал просто 2 разных слайдера: для моб версии и для десктопа, потому что дизайн у них сильно отличался и было бы сложно поддерживать в дальнейшем форматирование разных по коду и дизайну слайдов в одном слайдере. И такое бывает.