Переключение слайдов в swiper slider
На данный момент когда я в thumbs переключаю слайды, то активный слайд сразу передвигает контейнер, а не идет к нижнему слайду. Сейчас все наглядно покажу. Сейчас у меня вот так
а надо при нажатии на стрелки чтобы было вот так
Код:
const sliderThumbs = new Swiper('.product-slider__thumbs .swiper-container', { // ищем слайдер превью по селектору
// задаем параметры
direction: 'vertical', // вертикальная прокрутка
slidesPerView: 3, // показывать по 3 превью
spaceBetween: 10, // расстояние между слайдами
navigation: { // задаем кнопки навигации
nextEl: '.product-slider__next', // кнопка Next
prevEl: '.product-slider__prev' // кнопка Prev
},
freeMode: true, // при перетаскивании превью ведет себя как при скролле
breakpoints: { // условия для разных размеров окна браузера
0: { // при 0px и выше
direction: 'horizontal', // горизонтальная прокрутка
},
768: { // при 768px и выше
direction: 'vertical', // вертикальная прокрутка
}
}
});
// Инициализация слайдера изображений
const sliderImages = new Swiper('.product-slider__images .swiper-container', { // ищем слайдер превью по селектору
// задаем параметры
direction: 'horizontal', // вертикальная прокрутка
slidesPerView: 1, // показывать по 1 изображению
spaceBetween: 16, // расстояние между слайдами
mousewheel: true, // можно прокручивать изображения колёсиком мыши
navigation: { // задаем кнопки навигации
nextEl: '.product-slider__next', // кнопка Next
prevEl: '.product-slider__prev' // кнопка Prev
},
grabCursor: true, // менять иконку курсора
thumbs: { // указываем на превью слайдер
swiper: sliderThumbs // указываем имя превью слайдера
},
breakpoints: { // условия для разных размеров окна браузера
0: { // при 0px и выше
direction: 'horizontal', // горизонтальная прокрутка
},
768: { // при 768px и выше
direction: 'horizontal', // вертикальная прокрутка
}
}
});.product-slider {
color: #fff;
}
.product-slider .swiper-container {
width: 100%;
height: 100%;
}
.product-slider__flex {
display: flex;
align-items: flex-start;
}
.product-slider__col {
position: relative;
display: flex;
flex-direction: column;
width: 147px;
margin-right: 10px;
}
.product-slider__prev {
position: absolute;
top: 0;
right: 36%;
z-index: 99;
}
.product-slider__next {
position: absolute;
bottom: 0;
right: 36%;
z-index: 99;
}
.slider__prev,
.slider__next {
display: none;
}
.slider__prev:focus,
.slider__next:focus {
outline: none;
}
.product-slider__thumbs {
overflow: hidden;
height: 556px;
}
.product-slider__thumbs .swiper-slide-thumb-active .product-slider__image {
opacity: 1;
border: 2px solid #c40000;
border-radius: 22px;
}
.product-slider__images {
position: relative;
overflow: hidden;
height: 556px;
width: 457px;
}
.product-slider__image {
width: 100%;
height: 100%;
}
.product-slider__image img {
border-radius: 22px;
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 767.98px) {
.product-slider__flex {
flex-direction: column-reverse;
}
.product-slider__col {
flex-direction: row;
align-items: center;
margin-right: 0;
margin-top: 24px;
width: 100%;
}
.product-slider__images {
position: relative;
width: 100%;
overflow: hidden;
}
.product-slider__thumbs {
overflow: hidden;
height: 100px;
width: calc(100% - 96px);
margin: 0 16px;
}
}
.product-slider__btn-thumb--next {
position: absolute;
bottom: 0;
right: 36%;
background-image: url(/images/product/arrow-next.svg);
height: 40px;
width: 40px;
transform: rotate(90deg);
z-index: 6;
}
.product-slider__btn-thumb--prev {
position: absolute;
top: 0;
right: 36%;
background-image: url(/images/product/arrow-next.svg);
height: 40px;
width: 40px;
transform: rotate(270deg);
z-index: 6;
}
.product-slider__btn-main--next {
position: absolute;
top: 47%;
right: 0;
background-image: url(/images/product/arrow-next.svg);
height: 40px;
width: 40px;
z-index: 6;
}
.product-slider__btn-main--prev {
position: absolute;
top: 47%;
left: 0;
background-image: url(/images/product/arrow-next.svg);
height: 40px;
width: 40px;
z-index: 6;
transform: rotate(180deg);
}<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Lazer-teach</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&display=swap" rel="stylesheet">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<body>
<section class="product-slider">
<div class="product-slider__flex">
<div class="product-slider__col">
<div class="product-slider__prev product-slider__btn-thumb--prev"></div> <!-- Кнопка для переключения на предыдущий слайд -->
<div class="product-slider__thumbs">
<div class="swiper-container"> <!-- Слайдер с превью -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="product-slider__image"><img src="https://picsum.photos/1920/1080" alt=""/></div>
</div>
<div class="swiper-slide">
<div class="product-slider__image"><img src="https://picsum.photos/1920/1081" alt=""/></div>
</div>
<div class="swiper-slide">
<div class="product-slider__image"><img src="https://picsum.photos/1920/1082" alt=""/></div>
</div>
<div class="swiper-slide">
<div class="product-slider__image"><img src="https://picsum.photos/1920/1083" alt=""/></div>
</div>
<div class="swiper-slide">
<div class="product-slider__image"><img src="https://picsum.photos/1920/1084" alt=""/></div>
</div>
</div>
</div>
</div>
<div class="product-slider__next product-slider__btn-thumb--next"></div> <!-- Кнопка для переключения на следующий слайд -->
</div>
<div class="product-slider__images">
<div class="swiper-container"> <!-- Слайдер с изображениями -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="product-slider__image myImg">
<img src="https://picsum.photos/1920/1080" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="product-slider__image myImg">
<img src="https://picsum.photos/1920/1081" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="product-slider__image myImg">
<img src="https://picsum.photos/1920/1082" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="product-slider__image myImg">
<img src="https://picsum.photos/1920/1083" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="product-slider__image myImg">
<img src="https://picsum.photos/1920/1084" alt="" />
</div>
</div>
</div>
</div>
<div class="product-slider__prev product-slider__btn-main--prev"></div>
<div class="product-slider__next product-slider__btn-main--next"></div>
</div>
</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.0.0/swiper-bundle.min.js'></script>
<script src="js/main.js"></script>
</body>Источник: Stack Overflow на русском