Слайдер с эффектом peek: Swiper, Slick, Owl адаптивно

Слайдер с эффектом “peek” проще всего получить через дробное значение видимых слайдов (например, slidesPerView: 1.2–1.6) в сочетании с центральной позиционировкой и управляемыми отступами; для адаптива используйте breakpoints/ responsive и рассчитывайте ширины по формуле $\\text{slideWidth} = \\dfrac{W - (V-1)\\cdot G}{V}$ (или с учётом боковой подложки $P$). Ниже — готовые приёмы для Swiper, Slick и Owl, CSS/JS-паттерны, примеры breakpoints (мобильная: 3 слайда, планшет/десктоп: peek) и численные расчёты с рекомендациями по отладке.

Содержание

• Принцип peek-эффекта
• Swiper: настройка peek-эффекта
• Slick Slider: реализация peek
• Owl Carousel: stagePadding для peek-эффекта
• Чистый CSS/JS: как сделать слайдер с peek
• Адаптивный слайдер: расчёт ширин и отступов
• Практические советы и отладка
• Примеры настроек (шаблоны)
• Источники
• Заключение

Принцип peek-эффекта

Peek-эффект — это когда центральный слайд виден полностью, а крайние соседние слайды выступают частично. Два основных способа получить его:

• Библиотеки: использовать дробное количество видимых слайдов (например, slidesPerView: 1.4) или специальные опции (centerPadding, stagePadding). Это самый надёжный путь — библиотеки сами считают ширины/клонирование и дают опции для breakpoints.
• Самодельный (CSS/JS): задавать внутренний padding у контейнера и рассчитывать ширину слайда через calc() или CSS-переменные; использовать scroll-snap или кастомный JS для «привязки» к слайду.

Коротко: если вы используете Swiper — slidesPerView дробное + centeredSlides; в Slick — centerMode: true + centerPadding; в Owl — stagePadding. Ниже покажу точные настройки и формулы.

Swiper: настройка peek-эффекта

Swiper — самый гибкий и распространённый выбор для peek-эффекта. Ключевые параметры: slidesPerView (может быть дробным), centeredSlides, spaceBetween, loop, breakpoints, slideToClickedSlide.

Пример базовой разметки и инициализации (показываю адаптив: мобильная — 3 слайда, на планшете/десктопе — peek):

HTML

<div class="swiper my-swiper">
 <div class="swiper-wrapper">
 <div class="swiper-slide">1</div>
 <div class="swiper-slide">2</div>
 <div class="swiper-slide">3</div>
 <!-- ... -->
 </div>
 <div class="swiper-pagination"></div>
 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>
</div>

JS

const swiper = new Swiper('.my-swiper', {
 spaceBetween: 16,
 loop: true, // чтобы края тоже показывали peek
 grabCursor: true,
 slideToClickedSlide: true,
 pagination: { el: '.swiper-pagination', clickable: true },
 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
 breakpoints: {
 // mobile: 3 full slides, no centered peek
 0: {
 slidesPerView: 3,
 centeredSlides: false,
 spaceBetween: 12
 },
 // tablet: один крупный слайд + небольшой peek
 768: {
 slidesPerView: 1.2,
 centeredSlides: true,
 spaceBetween: 20,
 centeredSlidesBounds: true
 },
 // desktop: чуть больше peek
 1024: {
 slidesPerView: 1.4,
 centeredSlides: true,
 spaceBetween: 32
 }
 }
});

Советы и нюансы:

• Если не хочется пустых краёв при centeredSlides, используйте loop: true или centeredSlidesBounds: true.
• Для клика по видимой части соседнего слайда включите slideToClickedSlide: true.
• Простую документацию по параметрам смотрите в официальном API Swiper: https://swiperjs.com/swiper-api.
• Есть баги/особенности в некоторых версиях/браузерах (например, обсуждение поведения в Firefox) — см. обсуждение на GitHub: https://github.com/nolimits4web/swiper/discussions/7646.
• Для ленивой загрузки изображений используйте опцию lazy или loading="lazy" на img.

Slick Slider: реализация peek

Slick умеет peek через centerMode и centerPadding. centerPadding задаёт видимую часть соседних слайдов (в px или % — проценты удобны для адаптива).

Пример:

$('.slider').slick({
 slidesToShow: 1,
 centerMode: true,
 centerPadding: '12%', // или '60px' — зависит от дизайна
 infinite: true,
 responsive: [
 {
 breakpoint: 768,
 settings: {
 slidesToShow: 3,
 centerMode: false,
 centerPadding: '0'
 }
 },
 {
 breakpoint: 1024,
 settings: {
 slidesToShow: 1,
 centerMode: true,
 centerPadding: '10%'
 }
 }
 ]
});

Как подобрать centerPadding:

• Если хотите показать p px с каждой стороны, а ширина контейнера ~ W, то centerPadding в процентах ≈ (p / W) * 100%. Это даёт адаптивный эффект без дополнительного JS.
• Документация Slick: https://kenwheeler.github.io/slick/.

Замечание: Slick клонирует слайды для бесконечного прокручивания — учитывайте это при наложении стилей/анимаций.

Owl Carousel: stagePadding для peek-эффекта

В Owl есть stagePadding — простая опция для peek (значение в px). margin задаёт расстояние между слайдами.

Пример:

$('.owl-carousel').owlCarousel({
 items: 1,
 margin: 20,
 stagePadding: 100, // видимая часть по бокам
 loop: true,
 responsive: {
 0: { items: 3, stagePadding: 0, margin: 12 },
 768: { items: 1, stagePadding: 80, margin: 20 },
 1024: { items: 1, stagePadding: 140, margin: 32 }
 }
});

Официальная опция stagePadding: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Чистый CSS/JS: как сделать слайдер с peek

Если не хочется подключать библиотеку, можно сделать лёгкий peek-слайдер на CSS (scroll-snap) + небольшой JS для навигации.

Идея:

• У контейнера добавить боковые отступы (padding) равные желаемому peek (в % или px).
• Слайды — flex-элементы с фиксированной мин. шириной (min-width) и gap.
• Скролл-снап для “прилипания” к центру.

Пример CSS (упрощённо):

.carousel {
 display: flex;
 gap: 16px;
 padding: 0 12%;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
}
.slide {
 scroll-snap-align: center;
 flex: 0 0 calc((100% - 24% - (N-1)*16px) / N); /* N — visible slides on mobile/tablet */
 box-sizing: border-box;
}

Практика: для центрального крупного слайда задайте меньший N (например N=1), а padding слева/справа задаёт размер peek. JS нужен для управления кнопками “вперёд/назад” и плавной прокрутки (scrollTo + behavior: ‘smooth’).

Минусы: придётся самому реализовать клонирование для loop, а также обработку кликов по частично видимым слайдам.

Адаптивный слайдер: расчёт ширин и отступов

Ключевая формула (без боковой подложки):

$$\text{slideWidth} = \frac{W - (V-1)\cdot G}{V}$$

где:

• W — ширина контейнера (в px),
• V — видимое количество слайдов (slidesPerView, может быть дробным),
• G — расстояние/gap (spaceBetween / margin) в px.

Если есть боковая подложка (padding) P по каждой стороне (используется для peek), формула:

$$\text{slideWidth} = \frac{W - 2P - (V-1)\cdot G}{V}$$

Примеры:

• Мобильный: W = 360px, V = 3, G = 12px:

$$\text{slideWidth} = \frac{360 - (3-1)\cdot12}{3} = \frac{360 - 24}{3} = 112\text{px}.$$

• Планшет: W = 1024px, V = 1.2, G = 24px:

$$\text{slideWidth} = \frac{1024 - (1.2-1)\cdot24}{1.2} \approx 724.6\text{px}.$$

(Видимая часть соседнего слайда ≈ slideWidth*(V-1) + G.)

Как перевести px peek в проценты (для Slick centerPadding в %):

• Если хотите p px peek на сторону при контейнере W, то percent = (p / W) * 100%.
  Пример: p = 120px, W = 1200px → centerPadding = 10%.

Практический подход:

1. Задайте желаемый визуальный.peek (например, 60–160 px в зависимости от дизайна).
2. Посчитайте slideWidth по формуле.
3. Примените полученные значения в CSS/опциях библиотеки (или используйте проценты для centerPadding/stagePadding).

Практические советы и отладка

• Проверяйте поведение на реальных устройствах и при смене ориентации. Эмуляторы не всегда показывают точные размеры.
• Если соседние слайды кликаются плохо — включите slideToClickedSlide (Swiper) или добавьте обработчик клика на слайд.
• Для теней и overflow: если у родителя overflow:hidden, части теней могут обрезаться; либо делайте overflow: visible на внешнем контейнере, либо применяйте тени внутри слайда.
• Производительность: используйте transform/translate для анимации (библиотеки уже оптимизируют), подключите lazy-loading для изображений.
• Accessibility: добавьте aria-атрибуты, tabindex, поддержите клавиатуру (ArrowLeft/Right).
• Баги браузеров: при дробных slidesPerView в Swiper некоторые версии хотели бы/могут давать анимационные артефакты в Firefox — смотрите обсуждения и тестируйте: https://github.com/nolimits4web/swiper/discussions/7646.
• Тестируйте разное значение spaceBetween — иногда меньший gap визуально лучше при больших peek.

Примеры настроек (шаблоны)

Рекомендованные стартовые значения (можно менять под дизайн):

• Mobile (≤ 767):

• slidesPerView / items: 3

• spaceBetween / margin: 8–12px

• centered: false

• Tablet (768–1023):

• slidesPerView: 1.1–1.25

• spaceBetween: 16–24px

• centered: true

• loop: true

• Desktop (≥ 1024):

• slidesPerView: 1.3–1.6

• spaceBetween: 24–40px

• centered: true

• loop: true

Пример Swiper-шаблона (сводка):

breakpoints: {
 0: { slidesPerView: 3, centeredSlides: false, spaceBetween: 12 },
 768: { slidesPerView: 1.15, centeredSlides: true, spaceBetween: 20 },
 1024: { slidesPerView: 1.4, centeredSlides: true, spaceBetween: 32 }
}

Источники

• Официальный Swiper API: https://swiperjs.com/swiper-api
• Обсуждение на StackOverflow (пример peek в Swiper): https://stackoverflow.com/questions/38406690/swiper-slides-showing-end-start-of-previous-next-slides-like-airbnb-slider
• Ещё пример на StackOverflow: https://stackoverflow.com/questions/63485892/swiper-js-show-part-of-next-slide
• Обсуждение совместимости Swiper (Firefox): https://github.com/nolimits4web/swiper/discussions/7646
• Официальная документация Slick: https://kenwheeler.github.io/slick/
• React-Slick обсуждение (популярный запрос): https://github.com/akiran/react-slick/issues/674
• Проблемы/решения Slick: https://github.com/kenwheeler/slick/issues/1784
• Официальная документация Owl Carousel (stagePadding): https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
• Пример Owl Carousel (CodePen): https://codepen.io/clarklab/pen/ByWjxy

Заключение

Сделать адаптивный слайдер с эффектом “peek” — несложно: используйте дробное значение видимых слайдов и центрирование в Swiper, centerMode/centerPadding в Slick или stagePadding в Owl, подберите gap и боковые отступы по формуле и протестируйте на целевых размерах. На мобильной версии показывайте 3 слайда, а для планшета и десктопа включайте centered + fractional slidesPerView для аккуратного peek-эффекта — и не забудьте про тесты в реальных браузерах и lazy-loading изображений.