SwiperJS：展开一张幻灯片的水平旋转木马

Question

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

我是这样做的：

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

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

Answer 1

这并不理想，但您可以通过点击转到特定幻灯片

    featured_games.slideTo(swiper.snapIndex + 1)

恕我直言，这可以改进

Answer 2

工作示例：

点击图片将滚动到该图片（居中）
拖动图像线将改变当前活动图像

Same example on codepen.

一些注意事项：

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

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 -->

SwiperJS：展开一张幻灯片的水平旋转木马

SwiperJS : Horizontal carousel with one slide expanded

javascript

css

swiperjs