样式化 SwiperJS 以在任一侧显示部分幻灯片

Posted

技术标签:

【中文标题】样式化 SwiperJS 以在任一侧显示部分幻灯片【英文标题】:Styling SwiperJS to show partial slides on either side 【发布时间】:2021-05-16 21:09:20 【问题描述】:

我正在寻找一些帮助来完成我的 SwiperJS 实现以替换我网站上的其他滑块 - 目的是拥有可变宽度的幻灯片 - 如果中心有横向幻灯片,则显示它和前面的一些内容并在任一侧跟随幻灯片,但如果是纵向显示更多 - 图像可能会使我的意思更清晰

我的 SwiperJS 设置如下 - 它可以工作,但一次只显示一个图像,我还需要显示部分前后幻灯片,我猜它离它的位置只有一小步需要,但我无法解决

<!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

  <!-- Demo styles -->
  <style>
    html,
    body 
      position: relative;
      height: 400px;
    

    body 
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    

    .swiper-container 
      width: 100%;
      height: 100%;
      background-color:#ffcc00;
    

    .swiper-slide width:100%;height:100%;

    .swiper-slide img 
      height:100%;
    
   </style>
 </head>

 <body>
   <!-- Swiper -->
   <div class="swiper-container">
     <div class="swiper-wrapper">
       <div class="swiper-slide"><img src='https://via.placeholder.com/900x600.png?text=900x600'></div>
       <div class="swiper-slide"><img src='https://via.placeholder.com/600x900.png?text=600x900'></div>
       <div class="swiper-slide"><img src='https://via.placeholder.com/900x600.png?text=900x600'></div>
       <div class="swiper-slide"><img src='https://via.placeholder.com/900x600.png?text=900x600'></div>
       <div class="swiper-slide"><img src='https://via.placeholder.com/600x900.png?text=600x900'></div>
       <div class="swiper-slide"><img src='https://via.placeholder.com/900x600.png?text=900x600'></div>
       <div class="swiper-slide"><img src='https://via.placeholder.com/600x900.png?text=600x900'></div>
       <div class="swiper-slide"><img src='https://via.placeholder.com/600x900.png?text=600x900'></div>
       <div class="swiper-slide"><img src='https://via.placeholder.com/600x900.png?text=600x900'></div>
       <div class="swiper-slide"><img src='https://via.placeholder.com/600x900.png?text=600x900'></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
 <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-     controls="swiper-wrapper-181ef273d22e62b1"></div>
  <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-     controls="swiper-wrapper-181ef273d22e62b1"></div>
  </div>

  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', 
      slidesPerView: 'auto',
      spaceBetween: 30,
      loop: true,
      loopFillGroupWithBlank: true,
      pagination: 
         el: '.swiper-pagination',
        clickable: true,
      ,
      navigation: 
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      ,
    );
  </script>
</body>

</html>

Landscape image in the slider with partial slides on either side

Portrait image in the slider with partial slides on either side

【问题讨论】:

【参考方案1】:

我觉得你应该试试slidePerView: 2.5: https://stackblitz.com/edit/7z4hsr-ld2tx8?file=index.html

或指定幻灯片宽度: https://stackblitz.com/edit/7z4hsr?file=index.html

【讨论】:

以上是关于样式化 SwiperJS 以在任一侧显示部分幻灯片的主要内容,如果未能解决你的问题,请参考以下文章

在 swiper js 中更改幻灯片时隐藏元素

SwiperJS - ReactJS 轮播混合视频和图像双重响起

删除第一张和最后一张幻灯片SwiperJS的效果

SwiperJS 样式不适用于 NextJS

Angular 和 SwiperJS - 在父滑块索引更改时重置嵌套滑块索引

轮播指示器未显示在幻灯片的白色背景上(自定义样式或类添加)?