swiper 两个轮播关联切换

<section class="diary">
    <div class="swiper-container gallery-thumbs swiper-nav">
      <div class="swiper-wrapper">
        <div class="swiper-slide pr">标题1</div>
        <div class="swiper-slide pr">标题2</div>
        <div class="swiper-slide pr">标题3</div>
        <div class="swiper-slide pr">标题4</div>
      </div>
    </div>
    <div class="swiper-container gallery-top swiper-cont">
      <div class="swiper-wrapper">
        <div class="swiper-slide">内容1</div>
        <div class="swiper-slide">内容2</div>
        <div class="swiper-slide">内容3</div>
        <div class="swiper-slide">内容4</div>
      </div>
    </div>
    <script>
      var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 3,
        slidesPerView: 3
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        
      });
      var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 3,
        autoplay:false,//自动轮播关闭
        autoHeight: true,//高度自适应
   
         pagination: {
          el: '.swiper-pagination-h',
          clickable: true,
        },
        thumbs: {
          swiper: galleryThumbs,
        }
      });
   
    </script>
  </section>