Как вытащить текст из активного слайда в слайдере Swiper в блок, который находится вне слайдера?

Подскажите пожалуйста, как вытащить текст при смене активного слайда с блока .swiper-slide__text в блок .swiper-content, который находится вне слайдера? То есть нужно, чтобы при смене слайда текст появлялся в блоке .swiper-content.

<div class="wrapper">
    <div class="container">
        <div class="sw-con swiper">
            <div class="sw-row swiper-wrapper">
                <div class="sw-slide swiper-slide">
                    <div class="swiper-slide__image" style="background-color: red;"></div>
                    <div class="swiper-slide__text">
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>
                <div class="sw-slide swiper-slide">
                    <div class="swiper-slide__image" style="background-color: blue;"></div>
                    <div class="swiper-slide__text">
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>
                <div class="sw-slide swiper-slide">
                    <div class="swiper-slide__image" style="background-color: yellow;"></div>
                    <div class="swiper-slide__text">
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>
            </div>
            <div class="swiper-control">
                <div class="swiper-pagination"></div>
                <div class="slider-arrows">
                    <button class="slider-arrow__prev"></button>
                    <button class="slider-arrow__next"></button>
                </div>
            </div>
        </div> 
        <div class="swiper-content"></div>
    </div>
</div> 
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="js/swiper.js"></script>


.wrapper {

}
.container {
    margin: 0 auto; 
    max-width: 1000px;
    height: 600px;
    border: 1px solid black;
    position: relative;
}
.sw-con {
    overflow: hidden;
}
.swiper {
}
.sw-row {

}
.swiper-wrapper {
    
}
.sw-slide {

}
.swiper-slide {
}
.swiper-slide__image {
    height: 500px;
}
.swiper-slide__text {
    font-size: 24px;
}
.swiper-control {
}
.swiper-pagination {
}
.slider-arrows {
}
.slider-arrow__prev {
}
.slider-arrow__next {
}
.swiper-content {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 450px;
    height: 245px;
    background-color: #d7c8b4;
    z-index: 5;
}

const swiper = new Swiper('.swiper', {
  
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },
  
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  
    autoplay: {
      delay: 2000,
    },

        // Optional parameters
     direction: 'horizontal',
     loop: true,
     slidesPerView: 1,
     speed: 1000,
  });