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

【问题标题】：Styling SwiperJS to show partial slides on either side样式化 SwiperJS 以在任一侧显示部分幻灯片
【发布时间】：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

【问题讨论】：

标签： javascript jquery css slider swiper

【解决方案1】：

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

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

【讨论】：