<div class="wrap">
<div class="slider-img-max">
<img src="" alt="">
</div>
<div class="images-slider swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://cdn.create.vista.com/api/media/small/317486274/stock-photo-beautiful-turquoise-waters-moraine-lake-snow-covered-peaks-banff-national" alt="Brass 1">
</div>
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1490730141103-6cac27aaab94?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZnJlZXxlbnwwfHwwfHx8MA%3D%3D" alt="Brass 2">
</div>
<div class="swiper-slide">
<img src="https://img.freepik.com/premium-photo/grapefruit-elevation-side-view-isolated-white-background_1031251-4356.jpg" alt="Brass 3">
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
var imageBig = document.querySelector(".slider-img-max img");
var swiper = new Swiper(".images-slider", {
slidesPerView: "auto",
spaceBetween: 16,
initialSlide: 2,
centeredSlides: true,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
320: {
centeredSlides: true,
}
},
on: {
init: function () {
let c_idx = this.activeIndex,
selectSrc = this.slides[c_idx].querySelector("img").src;
imageBig.src = selectSrc;
},
activeIndexChange: function () {
let c_idx = this.activeIndex,
selectSrc = this.slides[c_idx].querySelector("img").src;
imageBig.src = selectSrc;
}
},
});