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>
I would try with
filter: blur(value);
in cssYou can toggle class of current showing slide which will have normalized style for
blurness
and add a stylefilter-blur
for other slides