How to create a Swiper JS, HTML CSS Carousel with blurred non focused elements?

by

I’m trying to reproduce this piece of design for the web.

enter image description here
but I’m not sure what’s the best solution to achieve this goal. I need to develop it inside WordPress. I tried a good solution for other carousel sliders with the swiper.js library. But I’m not getting there with this actual design since I’m not able to displace the 3 elements together and at the same time and blur the non active elements…

This is the code I’ve right now (for the background I’ll take care directly inside the wordpress div)

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

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    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%;
    }

    .swiper-slide {
      cursor: pointer;
      text-align: center;
      font-size: 18px;
      background: transparent;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      wrap: wrap;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }


    .testosotto {
      margin-top: -15px;
      color:white;
      font-family: 'Poppins', sans-serif;
      font-style: normal;
      font-weight: 600;
      font-size: 15px;
      line-height: 22px;
      text-align: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="http://www.beyconsulting.it/Factanza/wp-content/uploads/2021/02/3.png" /><p class="testosotto">Guarda i nostri video</p></div>
      <div class="swiper-slide"><img src="http://www.beyconsulting.it/Factanza/wp-content/uploads/2021/02/2.png" /><p class="testosotto">Leggi i nostri Articoli</p></div>
      <div class="swiper-slide"><img src="http://www.beyconsulting.it/Factanza/wp-content/uploads/2021/02/1.png" /><p class="testosotto">Ascolta i nostri Podcast</p></div>

    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <!--<div class="swiper-button-next"></div> -->
    <!--<div class="swiper-button-prev"></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: 1,
      spaceBetween: 5,
      loop: true,
      loopFillGroupWithBlank: false,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '',
        prevEl: '',
      },
    });
  </script>

2 thoughts on “How to create a Swiper JS, HTML CSS Carousel with blurred non focused elements?”

  2. You can toggle class of current showing slide which will have normalized style for blurness and add a style filter-blur for other slides

    Reply

Leave a Comment