如何解决如何创建带有模糊非焦点元素的 Swiper JS、HTML CSS Carousel?
我正在尝试为网络重现这件设计。
这是我现在的代码(对于背景,我将直接在 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>
解决方法
我会尝试在 css 中使用 filter: blur(value);
我已经这样做了,谢谢
<!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: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
//overflow: visible;
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;
}
.swiper-slide {
filter: blur(4px);
}
.swiper-slide-active{
filter: blur(0);
}
.testosotto {
margin-top: -15px;
color: white;
width: 110px;
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;
//wrap: nowrap;
}
</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: 3,centeredSlides: true,spaceBetween: 220,slidesPerGroup: 1,loop: true,loopFillGroupWithBlank: false,pagination: {
el: '.swiper-pagination',clickable: true,},navigation: {
nextEl: '',prevEl: '',});
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。