html and css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>swiper effect</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css">
<style>
[class^="swiper-button-"] {
transition: all 0.3s ease;
}
.swiper-slide {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.swiper-container {
width: 80%;
height: 100vh;
float: left;
transition: opacity 0.6s ease, transform 0.3s ease;
}
.swiper-container.nav-slider {
width: 20%;
padding-left: 5px;
}
.swiper-container.nav-slider .swiper-slide {
cursor: pointer;
opacity: 0.4;
transition: opacity 0.3s ease;
}
.swiper-container.nav-slider .swiper-slide.swiper-slide-active {
opacity: 1;
}
.swiper-container.nav-slider .swiper-slide .content {
width: 100%;
}
.swiper-container.nav-slider .swiper-slide .content .title {
font-size: 20px;
}
.swiper-container:hover .swiper-button-prev, .swiper-container:hover .swiper-button-next {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
.swiper-container.loading {
opacity: 0;
visibility: hidden;
}
.swiper-slide {
overflow: hidden;
}
.swiper-slide .slide-bgimg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
.swiper-slide .entity-img {
display: none;
}
.swiper-slide .content {
position: absolute;
top: 40%;
left: 0;
width: 50%;
padding-left: 5%;
color: #fff;
}
.swiper-slide .content .title {
font-size: 2.6em;
font-weight: bold;
margin-bottom: 30px;
}
.swiper-slide .content .caption {
display: block;
font-size: 13px;
line-height: 1.4;
transform: translateX(50px);
opacity: 0;
transition: opacity 0.3s ease, transform 0.7s ease;
}
.swiper-slide .content .caption.show {
transform: translateX(0);
opacity: 1;
}
[class^="swiper-button-"] {
width: 44px;
opacity: 0;
visibility: hidden;
}
.swiper-button-prev {
transform: translateX(50px);
}
.swiper-button-next {
transform: translateX(-50px);
}
</style>
</head>
<body>
<div class="swiper-container main-slider loading">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(pretty-woman-1509956_960_720.jpg)">
</figure>
<div class="content">
<span class="caption"></span>
</div>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(281111184_d.jpg);">
</figure>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(auto.webp)">
<img src="auto.webp" class="entity-img" />
</figure>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(no.png)">
</figure>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(goth.webp)">
</figure>
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
<!-- Thumbnail navigation -->
<div class="swiper-container nav-slider loading">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(pretty-woman-1509956_960_720.jpg)">
<img src="" class="entity-img" />
</figure>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(281111184_d.jpg)">
</figure>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(auto.webp)">
</figure>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(no.png)">
</figure>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(goth.webp)">
</figure>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<script src="customswiper.js">
</script>
</body>
</html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>swiper effect</title>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css">
- <style>
- [class^="swiper-button-"] {
- transition: all 0.3s ease;
- }
- .swiper-slide {
- backface-visibility: hidden;
- -webkit-backface-visibility: hidden;
- }
- *, *:before, *:after {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- }
- .swiper-container {
- width: 80%;
- height: 100vh;
- float: left;
- transition: opacity 0.6s ease, transform 0.3s ease;
- }
- .swiper-container.nav-slider {
- width: 20%;
- padding-left: 5px;
- }
- .swiper-container.nav-slider .swiper-slide {
- cursor: pointer;
- opacity: 0.4;
- transition: opacity 0.3s ease;
- }
- .swiper-container.nav-slider .swiper-slide.swiper-slide-active {
- opacity: 1;
- }
- .swiper-container.nav-slider .swiper-slide .content {
- width: 100%;
- }
- .swiper-container.nav-slider .swiper-slide .content .title {
- font-size: 20px;
- }
- .swiper-container:hover .swiper-button-prev, .swiper-container:hover .swiper-button-next {
- transform: translateX(0);
- opacity: 1;
- visibility: visible;
- }
- .swiper-container.loading {
- opacity: 0;
- visibility: hidden;
- }
- .swiper-slide {
- overflow: hidden;
- }
- .swiper-slide .slide-bgimg {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-position: center;
- background-size: cover;
- }
- .swiper-slide .entity-img {
- display: none;
- }
- .swiper-slide .content {
- position: absolute;
- top: 40%;
- left: 0;
- width: 50%;
- padding-left: 5%;
- color: #fff;
- }
- .swiper-slide .content .title {
- font-size: 2.6em;
- font-weight: bold;
- margin-bottom: 30px;
- }
- .swiper-slide .content .caption {
- display: block;
- font-size: 13px;
- line-height: 1.4;
- transform: translateX(50px);
- opacity: 0;
- transition: opacity 0.3s ease, transform 0.7s ease;
- }
- .swiper-slide .content .caption.show {
- transform: translateX(0);
- opacity: 1;
- }
- [class^="swiper-button-"] {
- width: 44px;
- opacity: 0;
- visibility: hidden;
- }
- .swiper-button-prev {
- transform: translateX(50px);
- }
- .swiper-button-next {
- transform: translateX(-50px);
- }
-
- </style>
- </head>
- <body>
- <div class="swiper-container main-slider loading">
- <div class="swiper-wrapper">
- <div class="swiper-slide">
- <figure class="slide-bgimg" style="background-image:url(pretty-woman-1509956_960_720.jpg)">
- </figure>
- <div class="content">
- <span class="caption"></span>
- </div>
- </div>
-
-
-
-
-
- <div class="swiper-slide">
- <figure class="slide-bgimg" style="background-image:url(281111184_d.jpg);">
- </figure>
-
- </div>
-
-
- <div class="swiper-slide">
- <figure class="slide-bgimg" style="background-image:url(auto.webp)">
- <img src="auto.webp" class="entity-img" />
- </figure>
- </div>
- <div class="swiper-slide">
- <figure class="slide-bgimg" style="background-image:url(no.png)">
- </figure>
-
- </div>
- <div class="swiper-slide">
- <figure class="slide-bgimg" style="background-image:url(goth.webp)">
- </figure>
-
- </div>
- </div>
- <!-- If we need navigation buttons -->
- <div class="swiper-button-prev swiper-button-white"></div>
- <div class="swiper-button-next swiper-button-white"></div>
- </div>
- <!-- Thumbnail navigation -->
- <div class="swiper-container nav-slider loading">
- <div class="swiper-wrapper">
- <div class="swiper-slide">
- <figure class="slide-bgimg" style="background-image:url(pretty-woman-1509956_960_720.jpg)">
- <img src="" class="entity-img" />
- </figure>
-
- </div>
- <div class="swiper-slide">
- <figure class="slide-bgimg" style="background-image:url(281111184_d.jpg)">
-
- </figure>
-
- </div>
- <div class="swiper-slide">
- <figure class="slide-bgimg" style="background-image:url(auto.webp)">
-
- </figure>
-
- </div>
- <div class="swiper-slide">
- <figure class="slide-bgimg" style="background-image:url(no.png)">
-
- </figure>
-
- </div>
-
- <div class="swiper-slide">
- <figure class="slide-bgimg" style="background-image:url(goth.webp)">
- </figure>
-
- </div>
- </div>
- </div>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
- <script src="customswiper.js">
-
- </script>
- </body>
- </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>swiper effect</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css">
<style>
[class^="swiper-button-"] {
transition: all 0.3s ease;
}
.swiper-slide {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.swiper-container {
width: 80%;
height: 100vh;
float: left;
transition: opacity 0.6s ease, transform 0.3s ease;
}
.swiper-container.nav-slider {
width: 20%;
padding-left: 5px;
}
.swiper-container.nav-slider .swiper-slide {
cursor: pointer;
opacity: 0.4;
transition: opacity 0.3s ease;
}
.swiper-container.nav-slider .swiper-slide.swiper-slide-active {
opacity: 1;
}
.swiper-container.nav-slider .swiper-slide .content {
width: 100%;
}
.swiper-container.nav-slider .swiper-slide .content .title {
font-size: 20px;
}
.swiper-container:hover .swiper-button-prev, .swiper-container:hover .swiper-button-next {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
.swiper-container.loading {
opacity: 0;
visibility: hidden;
}
.swiper-slide {
overflow: hidden;
}
.swiper-slide .slide-bgimg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
.swiper-slide .entity-img {
display: none;
}
.swiper-slide .content {
position: absolute;
top: 40%;
left: 0;
width: 50%;
padding-left: 5%;
color: #fff;
}
.swiper-slide .content .title {
font-size: 2.6em;
font-weight: bold;
margin-bottom: 30px;
}
.swiper-slide .content .caption {
display: block;
font-size: 13px;
line-height: 1.4;
transform: translateX(50px);
opacity: 0;
transition: opacity 0.3s ease, transform 0.7s ease;
}
.swiper-slide .content .caption.show {
transform: translateX(0);
opacity: 1;
}
[class^="swiper-button-"] {
width: 44px;
opacity: 0;
visibility: hidden;
}
.swiper-button-prev {
transform: translateX(50px);
}
.swiper-button-next {
transform: translateX(-50px);
}
</style>
</head>
<body>
<div class="swiper-container main-slider loading">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(pretty-woman-1509956_960_720.jpg)">
</figure>
<div class="content">
<span class="caption"></span>
</div>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(281111184_d.jpg);">
</figure>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(auto.webp)">
<img src="auto.webp" class="entity-img" />
</figure>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(no.png)">
</figure>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(goth.webp)">
</figure>
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
<!-- Thumbnail navigation -->
<div class="swiper-container nav-slider loading">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(pretty-woman-1509956_960_720.jpg)">
<img src="" class="entity-img" />
</figure>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(281111184_d.jpg)">
</figure>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(auto.webp)">
</figure>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(no.png)">
</figure>
</div>
<div class="swiper-slide">
<figure class="slide-bgimg" style="background-image:url(goth.webp)">
</figure>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<script src="customswiper.js">
</script>
</body>
</html>
在线演示??
让链接同时具备两种打开方式
获取源码: Swipp
下载数:129人次, 文件大小: 455.9 KB, 上传日期: 2020年-11 月-26日
公众号回复:gcode 获取解压密码
2,997 人查阅