<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>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wrap {
  display: flex;
  gap: 40px;
  height: 100vh;
}
.slider-img-max {
  flex-basis: 50%;
  flex-shrink: 0;
}
.images-slider {
  flex-grow: 1;
}
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;
    }
  },
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.4/swiper-bundle.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.4/swiper-bundle.min.js