swiper 滑块中的第三个滑块

如何解决swiper 滑块中的第三个滑块

是否可以在下面的演示中添加第三张幻灯片。左边一个是导航，右边一个是滑块图像，我想添加第三个项目，它像图像一样滑动，第三个是带有一些文本的推荐部分。 当我们点击左侧的导航文本时，我想更改滑块图像和推荐。

const sliderThumbs = new Swiper('.slider__thumbs .swiper-container',{
    direction: 'vertical',slidesPerView: 6,spaceBetween: 24,navigation: { 
        nextEl: '.slider__next',prevEl: '.slider__prev'
    },freeMode: true,breakpoints: {
        0: {
            direction: 'horizontal',slidesPerView: 1,},768: { 
      slidesPerView: 6,direction: 'vertical',}
    }
});

const sliderImages = new Swiper('.slider__images .swiper-container',{ 
    direction: 'vertical',spaceBetween: 32,autoplay: {
   delay: 1500,mousewheel: true,effect: 'coverflow',coverflowEffect: {
    rotate: 80,slideShadows: false,grabCursor: true,thumbs: { 
        swiper: sliderThumbs
    },breakpoints: { 
        0: { 
            direction: 'horizontal',768: {
            direction: 'vertical',}
    }
});

body {
  background: #fff;
}
.slider {
  padding: 32px;
  color: #fff;
}
.slider .swiper-container {
  width: 100%;
  height: 100%;
}
.slider__flex {
  display: flex;
/*   align-items: flex-start; */
   align-items: center;
  width:100%;
}
.slider__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 250px;
  margin-right: 52px;
}
.slider__prev,.slider__next {
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color:#000;
}
.slider__prev:focus,.slider__next:focus {
  outline: none;
}
.slider__thumbs {
  height: calc(400px - 96px);
}
/* .slider__thumbs .slider__image {
  transition: 0.25s;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.5;
}
.slider__thumbs .slider__image:hover {
  opacity: 1;
}
.slider__thumbs .swiper-slide-thumb-active .slider__image {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  opacity: 1;
} */
.slider__thumbs .slider__image1 {
  transition: 0.25s;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.5;
}
.slider__thumbs .slider__image1:hover {
  opacity: 1;
}
.slider__thumbs .swiper-slide-thumb-active .slider__image1 {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  opacity: 1;
}
.slider__image1 {
  color:#000;
  text-decoration:none;
}
.slider__images {
  height: 580px;
}
.slider__images .slider__image img {
  transition: 3s;
}
/* .slider__images .slider__image:hover img {
  transform: scale(1.1);
} */
.slider__image {
  width: 260px;
  height: 540px;
  overflow: hidden;
}
.slider__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
@media (max-width: 767.98px) {
  .slider__flex {
    flex-direction: column-reverse;
  }
  .slider__col {
    flex-direction: row;
    align-items: center;
    margin-right: 0;
    margin-top: 4px;
    width: 100%;
  }
  .slider__images {
    width: 100%;
  }
  .slider__thumbs {
    height: 100px;
    width: calc(100% - 96px);
    margin: 0 16px;
  }
  .slider__prev,.slider__next {
    heig ht: auto;
    wid th: 32px;
    margi n-top: -84px;
  }
}
 .testi{
  color:#000;
}
.text{
  float:right;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
  margin-top:200px;
  margin-left:20px;
}
.text .testi{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
}

@media (max-width: 767.98px) {
  .text{
    visibility:hidden;
  }
  .text .testi{
    visibility: hidden;
  }
  .textmob{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
}
.text .testimob{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
}
  .testimob{
      color: #000;

  }
}

<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="slider">
  <div class="slider__flex">
    <div class="slider__col">
      <div class="slider__prev">Prev</div> 
      <div class="slider__thumbs">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="#" class="slider__image1">Text to be shown on screen</a>
            </div>
            <div class="swiper-slide">
              <a href="#" class="slider__image1">Text to be shown on screen</a>
            </div>
            <div class="swiper-slide">
              <a href="#" class="slider__image1">Text to be shown on screen</a>
            </div>
            <div class="swiper-slide">
              <a href="#" class="slider__image1">Text to be shown on screen</a>
            </div>
            <div class="swiper-slide">
              <a href="#" class="slider__image1">Text to be shown on screen</a>
            </div>
            <div class="swiper-slide">
              <a href="#" class="slider__image1">Text to be shown on screen</a>
            </div>
          </div>
        </div>
      </div>
      <div class="slider__next">Next</div> 
    </div>
    <div class="slider__images">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="slider__image"><img src="https://i.imgur.com/O396E0V.png" alt="" /></div>
          </div>
          <div class="swiper-slide">
            <div class="slider__image"><img src="https://i.imgur.com/O396E0V.png" alt="" /></div>
          </div>
          <div class="swiper-slide">
            <div class="slider__image"><img src="https://i.imgur.com/O396E0V.png" alt="" /></div>
          </div>
          <div class="swiper-slide">
            <div class="slider__image"><img src="https://i.imgur.com/O396E0V.png" alt="" /></div>
          </div>
          <div class="swiper-slide">
            <div class="slider__image"><img src="https://i.imgur.com/O396E0V.png" alt="" /></div>
          </div>
          <div class="swiper-slide">
            <div class="slider__image"><img src="https://i.imgur.com/O396E0V.png" alt="" /></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>