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

February 19, 2021 by admin

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

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>