如何解决SwiperJS模板的第一张卡由于translate3d属性而发生偏移
我最近尝试从codepen导入笔
HTML:
<div class="wrapper">
<section class="module-team">
<div class="team">
<h2 class="title">Meet our Team</h2>
<div class="team-cards">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper"></div>
</div>
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="navigation">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
</section>
</div>
CSS:
@import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:300,400,500,600,700,800,900|Barlow:300,900&display=swap");
$font-01: "Barlow",sans-serif; $font-02: "Barlow Condensed",sans-serif;
$m-01: #D45B7A; $m-02: #FDA576;
$g-01: linear-gradient(140deg,$m-01,$m-02);
$neu-01: #EAEAEA; $neu-02: #EDEEF4; $neu-03: #6F7073; $neu-04:
#505050; $neu-05: #403E3E;
$transition: all 0.4s cubic-bezier(0.7,0.29,0.68,1.43);
@mixin lg {
@media screen and (max-width: 1180px) {
@content;
} }
@mixin md {
@media screen and (max-width: 1023px) {
@content;
} }
@mixin sm {
@media screen and (max-width: 799px) {
@content;
} }
@mixin xs {
@media screen and (max-width: 511px) {
@content;
} }
h1,h2,h3,h4,h5,h6,p,ul,li,button,a,i,input,figure,img {
margin: 0;
padding: 0;
list-style: none;
border: 0;
-webkit-tap-highlight-color: transparent;
text-decoration: none;
color: inherit;
&:focus {
outline: 0;
} }
div {
-webkit-tap-highlight-color: transparent; }
body {
margin: 0;
padding: 0;
height: auto;
font-family: $font-01;
background: white;
//background-color: #CBCBCB;
}
.wrapper {
.module-team {
position: relative;
&:before {
width: 100%;
height: 380px;
background-color: $neu-01;
content: '';
position: absolute;
z-index: -1;
@include sm {
height: 250px;
}
}
.team {
max-width: 1440px;
margin: 0 auto;
padding: 100px 5%;
@include sm {
padding: 50px 0%;
}
.title {
text-align: center;
margin-bottom: 80px;
color: $neu-03;
font-size: 44px;
line-height: normal;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1.3px;
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100px;
&:before {
content: '';
position: absolute;
width: 80px;
height: 10px;
background: $neu-03;
border-radius: 50px;
bottom: 0;
opacity: 0.2;
@include sm {
width: 60px;
height: 5px;
}
}
@include sm {
font-size: 32px;
height: 60px;
margin-bottom: 40px;
}
}
.team-cards {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
.swiper-container {
max-width: 920px;
height: 360px;
padding: 0 20px;
cursor: default;
@include lg {
max-width: 600px;
}
@include sm {
max-width: 280px;
height: 370px;
padding: 0 20px;
overflow: visible;
}
/* Card */
.swiper-slide {
background-color: white;
width: 280px !important;
height: 320px;
border-radius: 4px;
box-shadow: inset 0px 0px 0px 1px $neu-02;
position: relative;
transition: all 0.4s ease;
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0px 20px 40px -20px #EAEAEA;
top: 0px;
z-index: -1;
transition: all 0.4s ease;
}
.card {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
.bg {
position: absolute;
width: 100%;
height: 100px;
top: 0;
border-radius: 4px 4px 0px 0px;
transition: all 0.4s ease;
background: $g-01;
z-index: 1;
}
.more {
width: 24px;
height: 24px;
position: absolute;
z-index: 2;
right: 20px;
top: 20px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transform: rotate(0deg);
transition: all 0.4s ease;
border-radius: 100%;
&:before,&:after {
width: 16px;
height: 2px;
background-color: white;
content: '';
position: absolute;
border-radius: 4px;
transition: all 0.4s ease;
}
&:after {
transform: rotate(90deg);
}
@include sm {
padding: 10px;
top: 10px;
right: 10px;
}
&:hover {
transform: scale(1.1);
background-color: rgba(white,0.2);
@include sm {
transform: scale(1);
background-color: transparent;
}
}
}
.photo {
width: 120px;
height: 120px;
border-radius: 100%;
overflow: hidden;
z-index: 1;
position: absolute;
top: 40px;
border: 3px solid #FFFFFF;
transition: all 0.4s ease;
box-shadow: 0px 4px 10px rgba($neu-03,0.3);
&:before,&:after {
width: 100%;
height: 100px;
border-radius: 4px;
content: '';
position: absolute;
transition: all 0.4s ease;
opacity: 0;
left: 0;
top: 0;
}
&:before {
background: $neu-05;
z-index: 1;
}
&:after {
background: $g-01;
z-index: 2;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.text {
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
transform: translateY(50px);
transition: all 0.3s ease;
.name {
font-size: 20px;
color: #6F7073;
font-weight: 300;
}
.role {
font-size: 14px;
font-weight: 600;
color: #CBCBCB;
letter-spacing: 0.8px;
margin-top: 5px;
}
.desc {
color: white;
display: none;
margin-top: 20px;
font-size: 16px;
letter-spacing: 0.6px;
text-align: center;
padding: 0 40px;
font-weight: 400;
line-height: 22px;
}
}
.social {
z-index: 1;
display: flex;
align-items: center;
background-color: rgba($neu-01,0.5);
box-shadow: inset 0px 11px 13px -20px $neu-03;
width: 100%;
position: absolute;
bottom: 0;
height: 50px;
padding: 0 20px;
box-sizing: border-box;
border-radius: 0px 0px 4px 4px;
transition: all 0.4s ease;
.pointer {
display: block;
width: 10px;
height: 10px;
z-index: 2;
bottom: 50px;
position: absolute;
transform: translateX(25px);
transition: all 0.4s ease;
opacity: 0;
&:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: white;
transform: rotate(45deg);
}
@include sm {
display: none;
}
}
.icons {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
.icon {
width: 25%;
height: 24px;
opacity: 0.3;
transition: all 0.4s ease;
&:hover {
opacity: 0.6;
@include sm {
opacity: 0.3;
}
}
img {
width: 100%;
height: 100%;
}
}
}
&:hover {
.pointer {
opacity: 1;
bottom: 45px;
}
}
}
}
&:hover {
transform: translateY(3px);
&:before {
box-shadow: 0px 10px 10px -10px #EAEAEA;
}
@include sm {
transform: translateY(0px);
&:before {
box-shadow: 0px 20px 40px -20px #EAEAEA;
}
}
.card {
.photo {
transform: translateY(-5px);
box-shadow: 0px 6px 20px rgba($neu-03,0.3);
@include sm {
transform: translateY(0px);
box-shadow: 0px 4px 10px rgba($neu-03,0.3);
}
}
}
}
&.show-more {
.card {
overflow: hidden;
.more {
transform: rotate(45deg) scale(1);
&:hover {
transform: rotate(45deg) scale(1.1);
@include sm {
transform: rotate(45deg) scale(1);
}
}
}
.social {
transform: translateY(55px);
}
.text {
color: white;
transform: translateY(0px);
transition: all 0.6s ease;
.name,.role {
color: white;
}
.desc {
display: block;
}
}
.photo {
width: 100%;
height: 100%;
top: 0px;
border: solid 0px transparent;
border-radius: 4px;
box-shadow: 0px 4px 10px rgba($neu-03,0);
transform: translateY(0px);
transition: all 0.4s ease;
&:before {
height: 100%;
opacity: 0.5;
}
&:after {
height: 100%;
opacity: 0.8;
border-radius: 4px;
}
img {
filter: grayscale(100%);
}
&:hover {
transform: translateY(0px);
}
}
.bg {
width: 100%;
height: 100%;
//z-index: 2;
border-radius: 4px;
&:before {
opacity: 0.5;
}
&:after {
opacity: 0.8;
}
}
}
}
}
}
.swiper-pagination {
bottom: 0;
display: none;
@include sm {
display: block;
}
.swiper-pagination-bullet {
background-color: $neu-03;
margin: 0 5px;
border-radius: 5px;
transition: all 0.4s ease;
&:focus {
outline: 0;
}
}
.swiper-pagination-bullet-active {
background: $g-01;
width: 16px;
}
}
.navigation {
width: 1098px;
height: 28px;
position: absolute;
margin: 0 auto;
padding: 0 5%;
box-sizing: border-box;
top: 86px;
display: flex;
justify-content: center;
align-items: center;
@include lg {
width: 750px;
}
.swiper-button-prev,.swiper-button-next {
width: 28px;
height: 28px;
background-position: center;
transition: all 0.4s ease;
top: 0;
margin-top: 0;
&:focus {
outline: none;
}
@include sm {
display: none;
}
}
.swiper-button-prev {
background-image: url("https://rafaelalucas.com/dailyui/6/assets/arrow-prev.svg");
background-position-x: 5px;
transform: translateX(5px);
&:hover {
transform: translateX(0px);
}
}
.swiper-button-next {
background-image: url("https://rafaelalucas.com/dailyui/6/assets/arrow-next.svg");
background-position-x: -5px;
transform: translateX(-5px);
&:hover {
transform: translateX(0px);
}
}
}
}
}
} }
JavaScript与手写笔相同
到我正在处理的项目中,遇到了这个问题。轮播中的第一张卡片略有偏移,每张幻灯片都会增加。
像这样:
经过一些调试后,我发现发生这种情况是因为swiper-wrapper的转换属性高于模板中的属性。有什么办法可以解决这个问题?
这支笔本身可以正常工作,但是当我尝试将其导入到我的项目中时,便出现了问题。
我尝试阅读Swiper API并弄乱了script.js文件,但似乎没有任何效果。 任何解决此问题的帮助将不胜感激。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。