Styling SwiperJS to show partial slides on either side

  css, javascript, jquery, slider, swiper

Im looking for a little help to complete my SwiperJS implementation to replace other sliders on my site – the intent is to have variable width slides – if there is a landscape slide in the centre then show it and a little bit of the preceding and following slides on either side but if it is portrait show a bit more – the images might make what I mean clearer

I have got SwiperJS set up as follows – it works but it only shows one image at a time, I need the partial preceding and following slides to show as well, I’m guessing it is one tiny step away from where it needs to be, but I cannot work it out

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

Source: Ask Javascript Questions

LEAVE A COMMENT