---
title: "Показать фрагмент следующего слайда в Swiper.js - WebTolk"
description: "Swiper.js: как сделать так, чтобы в карусели выглядывал кусочек, фрагмент следующего слайда. Инструкция, видео и пример кода."
url: "https://web-tolk.ru/blog/pokazat-fragment-sleduyushchego-slajda-v-swiper-js"
date: "2025-01-09T04:16:29+00:00"
language: "ru-RU"
---

# Показать фрагмент следующего слайда в Swiper.js

 Автор: Сергей Толкачев Создано: 09 января 2025 Обновлено: 13 ноября 2025 Просмотров: 1959    ![](https://web-tolk.ru/blog/images/blog/pokazat-fragment-sleduyushchego-slajda-v-swiper-js/header.webp)

Мне нравится **swiper.js** - это скрипт карусели, лёгкий, удобный. Клиент попросил, чтобы в карусели выглядывал кусочек следующего слайда, так как "**их посетители не догоняют, что тут надо листать**". Я такое видел на сайтах, но никогда сам не делал. Профдеформация позволяет видеть элементы управления и пользоваться ими 😀. Но тут надо было сделать.

Как оказалось - это очень легко, хотя совершенно не очевидно (в документации об этом не сказано вообще), поэтому оставлю эту заметку в блоге.

В `swiper.js` есть параметр **slidesPerView**, который указывает количество слайдов для всей карусели или для конкретного диапазона разрешений экрана (можно использовать в объекте **breakpoints**). Оказалось, что **это коэффициент и там можно использовать десятичные числа: 1.1, 1.25, 1.5 и т.д. (с точкой, а не запятой)**.

```
document.addEventListener('DOMContentLoaded', () => {
        const swiper = new Swiper('.subcategories-carousel', {
            speed: 400,
            spaceBetween: 0,
            breakpoints: {
                // when window width is >= 320px
                300: {
                    slidesPerView: 1.1,
                    spaceBetween: 0
                },
                // when window width is >= 982px
                982: {
                    slidesPerView: 3.2,
                    spaceBetween: 0
                },
                // when window width is >= 982px
                1200: {
                    slidesPerView: 4,
                    spaceBetween: 0
                }
            }
        });
    });
```

Быстро и удобно.

- [Документация swiper.js](https://swiperjs.com/get-started)
- [Документация **Swiper.js** на русском языке](https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation)
- [WT JSwiper - SWiper.js для Joomla-разработчиков](https://web-tolk.ru/dev/joomla-plugins/wt-jswiper), оформленный в виде Web Asset для Joomla 4+.

## Об авторе

![Толкачев Сергей Юрьевич](https://web-tolk.ru/images/uslugi/sergey-tolkachyov-apr-2023.webp)

### Толкачев Сергей Юрьевич

Joomla-разработчик. [Контрибьютер ядра Joomla](https://github.com/joomla/joomla-cms/pulls?q=is%3Apr+author%3Asergeytolkachyov+). Один из ведущих Telegram-канала русскоязычного Joomla-сообщества [JoomlaFeed](https://t.me/joomlafeed), один из модераторов [чата русскоязычного Joomla-сообщества](https://t.me/joomlaru). Мои расширения в официальном маркетплейсе расширений Joomla - [Joomla Extensions Directory](https://extensions.joomla.org/profile/profile/details/528051/). Имею публикации в [официальном журнале международного Joomla-сообщества - Joomla Community Magazine](https://magazine.joomla.org/authors/sergeytolkachyov) и на [официальном сайте русскоязычного Joomla-сообщества](https://joomlaportal.ru/users/sergey-tolkachyov).

Муж. Отец 3 детей.

Россия, Саратов.

## JSON-LD Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@id": "https://web-tolk.ru/",
                "name": "Главная"
            }
        },
        {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@id": "https://web-tolk.ru/blog",
                "name": "Блог"
            }
        },
        {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "name": "Показать фрагмент следующего слайда в Swiper.js"
            }
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@graph": [
        {
            "@type": "Organization",
            "@id": "https://web-tolk.ru/#/schema/Organization/base",
            "name": "WebTolk",
            "url": "https://web-tolk.ru/",
            "logo": {
                "@type": "ImageObject",
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo",
                "url": "images/webtolk-1080p.jpg",
                "contentUrl": "images/webtolk-1080p.jpg",
                "width": 1920,
                "height": 1080
            },
            "image": {
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo"
            },
            "sameAs": [
                "https://github.com/WebTolk",
                "https://github.com/sergeytolkachyov",
                "https://vk.com/web_tolk",
                "https://vk.com/webtolkru",
                "https://tenchat.ru/sergeytolkachyov",
                "https://t.me/sergeytolkachyov",
                "https://t.me/webtolkru"
            ]
        },
        {
            "@type": "WebSite",
            "@id": "https://web-tolk.ru/#/schema/WebSite/base",
            "url": "https://web-tolk.ru/",
            "name": "WebTolk",
            "publisher": {
                "@id": "https://web-tolk.ru/#/schema/Organization/base"
            }
        },
        {
            "@type": "WebPage",
            "@id": "https://web-tolk.ru/#/schema/WebPage/base",
            "url": "https://web-tolk.ru/blog/pokazat-fragment-sleduyushchego-slajda-v-swiper-js",
            "name": "Показать фрагмент следующего слайда в Swiper.js - WebTolk",
            "description": "Swiper.js: как сделать так, чтобы в карусели выглядывал кусочек, фрагмент следующего слайда. Инструкция, видео и пример кода.",
            "isPartOf": {
                "@id": "https://web-tolk.ru/#/schema/WebSite/base"
            },
            "about": {
                "@id": "https://web-tolk.ru/#/schema/Organization/base"
            },
            "inLanguage": "ru-RU",
            "breadcrumb": {
                "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17"
            }
        },
        {
            "@type": "Article",
            "@id": "https://web-tolk.ru/#/schema/com_content/article/120",
            "isPartOf": {
                "@id": "https://web-tolk.ru/#/schema/WebPage/base"
            }
        }
    ]
}
```