Как создать вложенный слайдер с помощью Swiper.js, используя эскизы?

Question

Виссарион

фронтенд , верстка , swiper , javascript

Как создать вложенный слайдер с помощью Swiper.js, используя эскизы?

Добрый день! У меня возникают трудности с настройкой вложенного слайдера на swiper.js. Кроме того, мне кажется, что созданная структура может быть не совсем правильной. Может быть, у кого-то есть идеи или рекомендации по реализации такого технического задания? <br/> <br/> <br/> В общем, структура слайдеров должна выглядеть следующим образом: <br/>

3 февраля 2025 г. 13:04

Ответы на вопрос 1

Похожие вопросы

Answer 1

Добрый день!

Создание вложенного слайдера с помощью Swiper.js действительно может быть немного сложным, но я постараюсь объяснить, как это сделать. Ниже вы найдете пример структуры HTML и соответствующий JavaScript код для инициализации вложенных слайдеров.

### Пример структуры HTML

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <style>
        /* Добавьте свои стили для слайдеров */
        .nested-swiper {
            width: 100%;
            height: 200px;
        }
        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f0f0f0;
            font-size: 18px;
            border: 1px solid #ddd;
        }
    </style>
    <title>Вложенный Swiper</title>
</head>
<body>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            Слайд 1
            <div class="nested-swiper-container">
                <div class="nested-swiper swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">Эскиз 1.1</div>
                        <div class="swiper-slide">Эскиз 1.2</div>
                        <div class="swiper-slide">Эскиз 1.3</div>
                    </div>
                    <!-- Добавьте элементы навигации, если необходимо -->
                </div>
            </div>
        </div>
        <div class="swiper-slide">Слайд 2</div>
        <div class="swiper-slide">Слайд 3</div>
    </div>
    <!-- Добавьте элементы навигации, если необходимо -->
</div>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
    // Инициализация основного слайдера
    const mainSwiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });

    // Инициализация вложенных слайдеров
    const nestedSwipers = document.querySelectorAll('.nested-swiper');

    nestedSwipers.forEach((nestedSwiper) => {
        new Swiper(nestedSwiper, {
            direction: 'horizontal',
            loop: true,
            slidesPerView: 1,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    });
</script>

</body>
</html>
```

### Объяснение структуры

1. **Основной слайдер**: Инициализируется как обычный Swiper с классом `swiper-container`.
2. **Вложенный слайдер**: Каждый вложенный слайдер (nested swiper) также создается с классом `swiper-container`, и его слайды определяются внутри блока соответствующего слайда основного слайдера.
3. **JavaScript код**:
   - Инициализируется основной слайдер.
   - Для каждого вложенного слайдера добавляется отдельная инициализация.

### Стилизация

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

### Моменты для уточнения:

- Убедитесь, что вы подключили необходимые стили и скрипты Swiper.
- Параметры слайдеров (например, `slidesPerView`, `loop`, `navigation`) могут быть настроены в зависимости от ваших требований.

Надеюсь, это поможет вам реализовать вложенные слайдеры с помощью Swiper.js! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.