Как создать слайдер, похожий на тот, что используется в Steam?

Question

Игорь

swiper , html , javascript , css

Как создать слайдер, похожий на тот, что используется в Steam?

У меня есть два связанных слайдера, использую библиотеку Swiper: один отображает крупное изображение, а другой — маленькие превью. У меня возникли следующие проблемы:

1. Я не могу понять, как настроить поведение полосы прокрутки. В настоящее время, при перетаскивании полосы, переключается слайд. Я хотел бы, чтобы при прокрутке можно было просто пролистывать превьюшки, не меняя слайд на основном слайдере (то есть, превьюшки не должны выделяться при использовании	scrollbar'а). Однако при нажатии на стрелку или превью основной слайдер должен переключаться (они должны выделяться). Я не могу полностью отвязать слайдеры, так как они должны сохранять общую навигацию.<br/> Пример:

29 марта 2025 г. 15:14

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

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

Answer 1

Для создания слайдера, похожего на слайдер в Steam, с использованием Swiper, вы можете следовать следующему подходу. Мы будем создавать два связанных слайдера: основной слайдер для отображения крупного изображения и слайдер для миниатюрных превью. Основная задача — управлять взаимодействием между слайдерами так, чтобы прокрутка миниатюр не переключала основной слайдер, а нажатие на стрелки или миниатюры — переключало.

### Шаг 1: Установка Swiper

Убедитесь, что вы установили библиотеку Swiper. Вы можете использовать npm или просто подключить CDN:

```html
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
```

### Шаг 2: HTML

```html
<div class="swiper-container main-slider">
    <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-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<div class="swiper-container thumbnails-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Миниатюра 1</div>
        <div class="swiper-slide">Миниатюра 2</div>
        <div class="swiper-slide">Миниатюра 3</div>
    </div>
</div>
```

### Шаг 3: CSS

Для базового стиля вы можете использовать следующий CSS (можно настроить под ваш дизайн):

```css
.swiper-container {
    width: 100%;
    height: 300px;
}

.thumbnails-slider {
    height: 100px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #009688;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
```

### Шаг 4: JavaScript

Теперь давайте настроим слайдеры и их взаимосвязь:

```javascript
const mainSlider = new Swiper('.main-slider', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    on: {
        slideChange: function () {
            // Если основной слайдер изменяется, обновляем миниатюры
            thumbnailsSlider.slideTo(this.activeIndex);
        },
    },
});

const thumbnailsSlider = new Swiper('.thumbnails-slider', {
    spaceBetween: 10,
    slidesPerView: 3,
    // дополнительный параметр, чтобы можно было кликать на миниатюры
    slideToClickedSlide: true,
});

// синхронизация:
thumbnailsSlider.on('click', function () {
    const clickedIndex = thumbnailsSlider.clickedIndex;
    mainSlider.slideTo(clickedIndex);
});
```

### Шаг 5: Прокрутка

Чтобы прокрутка миниатюр не переключала основной слайдер, вы можете использовать событие `touchMove` для отключения касания, если оно происходит внутри миниатюр. Попробуйте следующее:

```javascript
thumbnailsSlider.on('touchMove', function (e) {
    e.stopPropagation(); // Остановить дальнейшую обработку события
});
```

Теперь ваши слайдеры будут взаимодействовать так, как вы хотите. Прокрутка миниатюр не будет переключать основной слайдер, но при нажатии на миниатюры или стрелки слайдер будет переключаться соответственно. Это позволит вам достичь поведения, аналогичного тому, что есть в Steam.