Сергей delphinpro

Пишем кастомный слайдер. Нафиг не нужен здесь готовый.

Все слайды размещаем "стопкой" с помощью грид-раскладки (можно абсолютом, но это хуже)
Внутри слайда располагаемдва блока - текст и картинка. Текст невидимый, картинка за пределами слайда, в том сотоянии, из которого она будет выходит в состояние маленького размера справа. Блокам с текстом и картинкой задаем свойства плавного перехода (transition).
Наверху "бутерброда" слой с кнопками управления.

Дальше определяем три состояния картинки.

Первое уже определено - это невидимый слайд, текст скрыт (opacity:0), картинка за пределами не видна.

Второе состояние - "следующий слайд". Здесь текст все еще не виден, а картинка маленькая.

Третье состояние - "активный слайд". Здесь текст виден и и картинка большая в центре.

А дальше самое простое – по кликам на кнопки управления нужно просто менять состояния слайдов с помощью навешивания и убирания у них css классов.

ну как вариант

.slick-slider:not(.slick-initialized) {
  opacity: 0;
}

next() {
  this.currentIndex++;
  if (this.currentIndex >= this.slides.length)  {
    this.currentIndex = 0; // После последнего переходим на первый
  }
  // … дальше манипуляции со слайдами
}
previous() {
  this.currentIndex--;
  if (this.currentIndex < 0)  {
    // После первого переходим на последний (в обратном направлении)
    this.currentIndex = this.slides.length - 1; 
  }
  // … дальше манипуляции со слайдами
}

Когда нужно перекрутить на первый слайд, клонируем его, добавляем в конец. Когда клон уходит из области видимости – удаляем.

Режим loop реализуется клонированными элементами.
Последние несколько элементов клонируются и размещаются вначале списка слайдов. При каждой перемотке слайды с одной стороны переносятся на другую, создавая в области просмотра видимость бесконечности.
Посмотреть можно, открыв демку любого слайдера и заглянув в инспектор попереключать слайды.