swiper实现团队人物介绍引用幻灯片效果代码
代码语言：html
所属分类：幻灯片
代码描述：swiper实现团队人物介绍引用幻灯片效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper-bundle.9.3.2.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Poppins&display=swap");
body {
background-color: #d5e1ef;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
width: 100vw;
height: 100vh;
}
.container {
width: 100%;
height: 100%;
}
.card {
background-color: #f9fafe;
width: 550px;
height: 45%;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
padding: 30px 0 0 0;
transition: transform 400ms;
opacity: 0.5;
box-shadow: none;
}
.quote-icon {
position: absolute;
z-index: 0;
opacity: 0.05;
left: 3%;
top: 0;
}
.avatar {
width: 120px;
height: 120px;
border-radius: 150px;
border: 5px solid #f9fafe;
box-shadow: 0 0 50px #ccc;
position: absolute;
top: 0;
left: 50%;
transform: translate(-60px, -60px);
z-index: 1;
}
.header {
margin: 50px 0 0 0;
text-align: center;
z-index: 1;
}
.name {
font-family: "Hammersmith One", sans-serif;
text-transform: uppercase;
font-size: 22px;
margin: 0;
}
.title {
font-family: "Hammersmith One", sans-serif;
text-transform: uppercase;
font-size: 14px;
font-weight: 400;
margin: 5px 0 0 0;
padding: 0 5px;
color: #7ccdc5;
}
.quote-container {
margin: 0;
height: 100%;
z-index: 1;
padding: 15px 30px 30px 30px;
overflow: hidden;
}
.quote {
width: 100%;
height: 95%;
font-family: "Poppins", sans-serif;
font-size: 12px;
text-align: center;
color: #73808c;
margin: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
display: flex !important;
justify-content: center;
align-items: center;
}
.swiper-slide-active {
z-index: 1;
}
.swiper-slide-active .card {
box-shadow: 0 8px 30px -7px #c9dff0;
opacity: 1;
transform: scale(1.5);
}
.swiper {
margin-left: auto;
margin-right: auto;
}
.swiper-button-next:focus,
.swiper-button-prev:focus {
outline: none;
}
@media (max-height: 400px) {
.header {
margin: 40px 0 0 0;
}
.name {
font-size: 12px;
}
.title {
font-size: 10px;
}
.quote-container {
padding: 5px 20px 20px 20px;
}
.quote-icon {
width: 75px;
height: 75px;
}
.avatar {
width: 100px;
height: 100px;
transform: translate(-50px, -50px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="swiper swiperCarousel">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card">
<img class="avatar" src="//repo.bfw.wiki/bfwrepo/image/64700adadc9a0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90" />
<svg class="quote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="125px" height="125px">
<path
d="M 16.482422 8.9921875 A 1.50015 1.50015 0 0 0 15.943359 9.1074219 C 15.943359 9.1074219 13.068414 10.279429 10.357422 13.464844 C 7.6464301 16.650259 5 21.927419 5 30 A 1.50015 1.50015 0 0 0 5.015625 30.21875 A 8.5 8.5 0 0 0 13.5 39 A 8.5 8.5 0 0 0 13.5 22 A 8.5 8.5 0 0 0 8.7089844 23.480469 C 9.5777265 19.777157 11.122152 17.196657 12.642578 15.410156 C 14.931586 12.720571 17.056641 11.892578 17.056641 11.892578 A 1.50015 1.50015 0 0 0 16.482422 8.9921875 z M 37.482422 8.9921875 A 1.50015 1.50015 0 0 0 36.943359 9.1074219 C 36.943359 9.1074219 34.068414 10.279429 31.357422 13.464844 C 28.64643 16.650259 26 21.927419 26 30 A 1.50015 1.50015 0 0 0 26.015625 30.21875 A 8.5 8.5 0 0 0 34.5 39 A 8.5 8.5 0 0 0 34.5 22 A 8.5 8.5 0 0 0 29.708984 23.480469 C 30.577727 19.777157 32.122152 17.196657 33.642578 15.410156 C 35.931586 12.720571 38.056641 11.892578 38.056641 11.892578 A 1.50015 1.50015 0 0 0 37.482422 8.9921875 z"
/>
</svg>
<div class="header">
<h1 class="name">Amy Liu</h1>
<h2 class="title">CTO, Cybertech Solutions</h2>
</div>
<div class="quote-container">
<p class="quote">
I must admit, as a software developer, I was skeptical about the MindSync Neural Interface. But once I saw how it could transform not just the way I work but also how I engage with the world, I was sold. Its integration capability and responsiveness are unlike anything I've seen before. We're not just talking about a step forward in technology, but a quantum leap into the future.
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<img class="avatar" src="//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90" />
<svg class="quote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="125px" height="125px">
<path
d="M 16.482422 8.9921875 A 1.50015 1.50015 0 0 0 15.943359 9.1074219 C 15.943359 9.1074219 13.068414 10.279429 10.357422 13.464844 C 7.6464301 16.650259 5 21.927419 5 30 A 1.50015 1.50015 0 0 0 5.015625 30.21875 A 8.5 8.5 0 0 0 13.5 39 A 8.5 8.5 0 0 0 13.5 22 A 8.5 8.5 0 0 0 8.7089844 23.480469 C 9.5777265 19.777157 11.122152 17.196657 12.642578 15.410156 C 14.931586 12.720571 17.056641 11.892578 17.056641 11.892578 A 1.50015 1.50015 0 0 0 16.482422 8.9921875 z M 37.482422 8.9921875 A 1.50015 1.50015 0 0 0 36.943359 9.1074219 C 36.943359 9.1074219 34.068414 10.279429 31.357422 13.464844 C 28.64643 16.650259 26 21.927419 26 30 A 1.50015 1.50015 0 0 0 26.015625 30.21875 A 8.5 8.5 0 0 0 34.5 39 A 8.5 8.5 0 0 0 34.5 22 A 8.5 8.5 0 0 0 29.708984 23.480469 C 30.577727 19.777157 32.122152 17.196657 33.642578 15.410156 C 35.931586 12.720571 38.056641 11.892578 38.056641 11.892578 A 1.50015 1.50015 0 0 0 37.482422 8.9921875 z"
/>
</svg>
<div class="header">
<h1 class="name">Sarah Price</h1>
<h2 class="title">Sr. Technology Analyst</h2>
</div>
<div class="quote-container">
<p class="quote">
The MindSync Neural Interface is a game-changer in technology that's redefining the way we interact with digital devices. With the seamless and intuitive connection, it has reduced the cognitive load of my everyday tasks. As a busy professional, I no longer have to divide my attention across multiple devices. This revolutionary product has managed to marry convenience and functionality in a way I had never thought possible.
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<img class="avatar" src="//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90" />
<svg class="quote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="125px" height="125px">
<path
d="M 16.482422 8.9921875 A 1.50015 1.50015 0 0 0 15.943359 9.1074219 C 15.943359 9.1074219 13.068414 10.279429 10.357422 13.464844 C 7.6464301 16.650259 5 21.927419 5 30 A 1.50015 1.50015 0 0 0 5.015625 30.21875 A 8.5 8.5 0 0 0 13.5 39 A 8.5 8.5 0 0 0 13.5 22 A 8.5 8.5 0 0 0 8.7089844 23.480469 C 9.5777265 19.777157 11.122152 17.196657 12.642578 15.410156 C 14.931586 12.720571 17.056641 11.892578 17.056641 11.892578 A 1.50015 1.50015 0 0 0 16.482422 8.9921875 z M 37.482422 8.9921875 A 1.50015 1.50015 0 0 0 36.943359 9.1074219 C 36.943359 9.1074219 34.068414 10.279429 31.357422 13.464844 C 28.64643 16.650259 26 21.927419 26 30 A 1.50015 1.50015 0 0 0 26.015625 30.21875 A 8.5 8.5 0 0 0 34.5 39 A 8.5 8.5 0 0 0 34.5 22 A 8.5 8.5 0 0 0 29.708984 23.480469 C 30.577727 19.777157 32.122152 17.196657 33.642578 15.410156 C 35.931586 12.720571 38.056641 11.892578 38.056641 11.892578 A 1.50015 1.50015 0 0 0 37.482422 8.9921875 z"
/>
</svg>
<div class="header">
<h1 class="name">Dr. Miguel Torres</h1>
<h2 class="title">Head of Neurobiology, Central University</h2>
</div>
<div class="quote-container">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0