Как удалить несколько последних слайдов в слайдере 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 разных слайдера: для моб версии и для десктопа, потому что дизайн у них сильно отличался и было бы сложно поддерживать в дальнейшем форматирование разных по коду и дизайну слайдов в одном слайдере. И такое бывает.

Оптимизация изображений без сторонних приложений с помощью Gulp 4

Мой репозиторий — https://github.com/DenisShapkun/images-optimization. Используем вместо Tinypng десктопный вариант Gulp. Пакетная оптимизация изображений формата PNG,…

Препроцессор SCSS-to-CSS с помощью GULP4

В общем, очередная секретная разработка для ускорения процесса создания сайтов.  Обычно для верстки я использовал…

Онлайн CSS-генератор треугольников

CSS генератор треугольников, иногда приходится применять, чтобы создать уголки для каких-то элементов с помощью CSS….

Множественная тень с эффектом свечения с помощью CSS

Если по дизайну для текста нужна тень то обычно мы используем CSS-свойство text-shadow в таком…

Ответить