javascript - SwiperJS：水平旋转木马，一张幻灯片展开

Question

我想创建一个 Swiper 滑块，其中一张幻灯片应展开，如下图所示：

我这样做是这样的：

https://codepen.io/amiut/pen/poyyqye

但问题是，当您要打开放置在屏幕左右边缘的幻灯片时，其中一部分会进入屏幕下方并且不可见。我还尝试translateTo根据swiper 文档将整个滑块移动一点，但这也行不通。

我创建的 CodePen 非常简单，没有动画和其他东西。

Answer 1

这并不理想，但您可以只写点击即可转到该特定幻灯片

    featured_games.slideTo(swiper.snapIndex + 1)

恕我直言，这可以改进

Answer 2

工作示例：

• 单击图像将滚动到该图像（居中）
• 拖动图像线将更改当前活动图像

codepen 上的相同示例。

一些注意事项：

• id='test'和所有 CSS 前缀#test- 这只是为了能够在此站点上的代码片段中运行示例
• opacity在 CSS 中只是为了好玩
• .swiper-slide:after- 这只是为了在每张幻灯片的左上角显示“真实”幻灯片索引（我用它来测试）
• pointer-events: none;在 CSS 中用于测试，如果需要与幻灯片内部内容交互，可以将其删除

var featured_games = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
  spaceBetween: 30,
  centeredSlides: true,
  freeMode: true,
  freeModeSticky: false,
  watchSlidesProgress: true,
  watchSlidesVisibility: true,
  loop: true,
  on: {
    click: function (swiper, e) {
      if (typeof this.clickedIndex !== 'undefined') {
        this.slideTo(this.clickedIndex);
      }
    },
  }
});

#test .featured-game {
    overflow: hidden;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    pointer-events: none;
    background-image: url("https://images.unsplash.com/photo-1593642702909-dec73df255d7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
}

#test .featured-game .summary,
#test .featured-game .content {
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    pointer-events: none;
  width: 128px;
  height: 150px;
  box-sizing: border-box;
  position: absolute;
}

#test .featured-game {
  width: 128px;
  transition: width 0.4s;
}

#test .featured-game .content {
  right: 0;
  width: 0;
  overflow: hidden;
  padding: 0;
  transition: width 0.4s, padding: 0.2s;
}

#test .swiper-slide {
    display: flex;
    height: 150px;
    flex: 1;
    width: auto;
    cursor: pointer;
    opacity: 0.5;
}

#test .swiper-slide-active {
    opacity: 1;
}

#test .swiper-slide-active .featured-game {
  width: 256px;
}

#test .swiper-slide-active .featured-game .content {
  width: 128px;
}

#test .swiper-slide:after {
    display: block;
    position: absolute;
    content: attr(data-swiper-slide-index);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>

<div class="swiper-container" id="test">
   <div class="swiper-wrapper">
   
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
  </div><!-- .swiper-wrapper -->
  
</div><!-- .swiper-container -->

Answer 3

我设置freeMode: false、添加slideToClickedSlide:true和删除

     if (e.clientX < (this.width / 2)) {
      this.slideTo(swiper.snapIndex );
    } else {
      this.slideTo(swiper.snapIndex );
    }
    
    this.update();

单击此修改将使幻灯片居中

var featured_games = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
  spaceBetween: 30,
  centeredSlides: true,
  freeMode: false,
  freeModeSticky: false,
  watchSlidesProgress: true,
  watchSlidesVisibility: true,
  slideToClickedSlide:true,
  loop: true,
  on: {
    click: function (swiper, e) {
      var $slider = $(e.target).parents('.swiper-slide');
      
      
      if (! $slider.hasClass('extended')) {
        $('.swiper-slide.extended').removeClass('extended');
        $slider.addClass('extended');
          
      }
    }
  }
});

#test .featured-game {
    display: flex;
    overflow: hidden;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    pointer-events: none;
    background-image: url("https://images.unsplash.com/photo-1593642702909-dec73df255d7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
}

#test .featured-game .summary,
#test .featured-game .content {
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    pointer-events: none;
}

#test .featured-game .content {
    display: none;
}

#test .swiper-slide {
    display: flex;
    height: 150px;
    flex: 1;
    width: auto;
    cursor: pointer;
    opacity: 0.5;
}

#test .swiper-slide-active {
    opacity: 1;
}

#test .swiper-slide-active .featured-game .content {
    display: flex;
}

#test .swiper-slide:after {
    display: block;
    position: absolute;
    content: attr(data-swiper-slide-index);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>

<div class="swiper-container" id="test">
   <div class="swiper-wrapper">
   
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
     <div class="swiper-slide">
       <div class="featured-game">
         <div class="summary">SUMMARY</div>
         <div class="content">CONTENT</div>
       </div><!-- .featured-game -->
     </div><!-- .swiper-slide -->
     
  </div><!-- .swiper-wrapper -->
  
</div><!-- .swiper-container -->