上面卡片正常滑动，点击下面的小卡牌，切换到当前的对应的卡片。

    原生 js 版

    1. <section>
    2.   <div class="swiper-container">
    3.     <div class="swiper-wrapper">
    4.       <div class="swiper-slide">女皇
    5.         <p class="card-btn">送给朋友一张</p>
    6.       </div>
    7.       <div class="swiper-slide">世界
    8.         <p class="card-btn">送给朋友一张</p>
    9.       </div>
    10.       <div class="swiper-slide">星星
    11.         <p class="card-btn">送给朋友一张</p>
    12.       </div>
    13.       <div class="swiper-slide">月亮
    14.         <p class="card-btn">送给朋友一张</p>
    15.       </div>
    16.       <div class="swiper-slide">魔术师
    17.         <p class="card-btn">送给朋友一张</p>
    18.       </div>
    19.       <div class="swiper-slide">太阳
    20.         <p class="card-btn">送给朋友一张</p>
    21.       </div>
    22.     </div>
    23.   </div>
    25.   <div class="contrast-box">
    26.     <ul>
    27.       <li data-index="5">魔术师</li>
    28.       <li data-index="6">太阳</li>
    29.       <li data-index="1">女皇</li>
    30.       <li data-index="2">世界</li>
    31.       <li data-index="3">星星</li>
    32.       <li data-index="4">月亮</li>
    33.       <li class="combin-btn">合成</li>
    34.     </ul>
    35.   </div>
    36.   <div class="button-next"></div>
    37.   <div class="button-prev"></div>
    38. </section>
    40. var mySwiper = new Swiper('.swiper-container', {
    41.   nextButton: '.button-next',
    42.   prevButton: '.button-prev',
    43.   effect: 'coverflow', //3d滑动
    44.   grabCursor: true,
    45.   centeredSlides: true, // 居中
    46.   slidesPerView: 'auto',
    47.   loop: true,
    48.   slidesPerView: 2, // 显示2个
    49.   coverflow: {
    50.     rotate: 0,  //设置为0
    51.     stretch: 0,
    52.     depth: 200,
    53.     modifier: 2,
    54.     slideShadows: true
    55.   }
    56. })
    58. $('.contrast-box').on('click', ()=> {
    59.   var _index = $(this).data('index') + 1
    60.   mySwiper.slideTo(_index, 500, false)//切换到第一个slide，速度为1秒
    61. })
    63. $('.button-prev').click(()=> mySwiper.slidePrev())
    64. $('.button-next').click(()=> mySwiper.slideNext())

    IMG_CF17BB30E65A-1.jpeg