swiper实现产品服务列表拖动轮换轮播分页效果代码
代码语言：html
所属分类：幻灯片
代码描述：swiper实现产品服务列表拖动轮换轮播分页效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--swiper框架样式-->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.min.css">
<!--主要样式-->
<style>
@charset "utf-8";
* {
padding: 0;
margin: 0;
font-family: "微软雅黑";
box-sizing: inherit;
outline: none;
}
:after, :before {
box-sizing: inherit;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
body{
background-color: #313131
}
.pc-bg-container {
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}
.home-market-section {
text-align: center;
background-color: #0057b1;
}
/*标题*/
.home-market-section .section-title {
margin-bottom: 30px;
font-size: 30px;
min-width: 150px;
text-align: left;
color: #F8F8F8;
display: inline-block;
position: relative;
border: none;
height: 42px;
line-height: 42px;
padding-left: 10px;
margin-top: 60px;
}
.home-market-section .section-title a {
width: 100%;
display: block;
position: relative;
}
.home-market-section .section-title a:before {
position: absolute;
content: '';
right: -12px;
width: 15px;
height: 15px;
background-repeat: no-repeat;
top: 50%;
transform: translate(0, -50%);
transition: .2s;
}
.home-market-section .section-title a:hover:before {
right: -16px;
}
/*内容盒子*/
.home-market-section .section-inner {
position: relative;
max-width: 1280px;
margin: 0 auto;
}
.home-market-section .section-inner .swiper-container {
height: 364px;
max-width: 1230px;
}
.home-market-section .section-inner .swiper-container .swiper-wrapper {
align-items: center;
height: 279px!important;
}
/*内容列表*/
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide {
height: 279px!important;
background: 0 0;
padding: 0 50px;
box-sizing: border-box;
text-align: center;
}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide>a {
display: block;
float: left;
position: relative;
background-color: #fff;
border: 1px solid rgba(201,164,103,.2);
width: calc((100% - 60px)/ 4);
padding: 45px 25px 0;
height: 100%;
margin-right: 20px;
border-radius: 5px;
}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide>a:hover {
box-shadow: 0 10px 40px rgba(0,0,0,0.30);
border: 2px solid rgba(10,10,10,1.00);
-webkit-box-shadow: 0 10px 40px rgba(0,0,0,0.30);
}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide img {
height: 80px;
width: auto;
}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide h3 {
font-weight: normal;
margin-top: 25px;
font-size: 18px;
color: #252b3a;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide p {
margin-top: 10px;
font-size: 14px;
color: #a0a2a8;
text-align: center;
line-height: 22px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide>a .time {
position: absolute;
bottom: 12px;
width: calc(100% - 60px);
text-align: center;
border-top: 1px solid #e7e7e7;
color: #666a75;
padding-top: 10px;
letter-spacing: .44px;
line-height: 23px;
}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide>a .time span {
font-size: 20px;
color: #f66f6a;
letter-spacing: 0;
line-height: 23px;
margin-right: 3px;
}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide>a:last-of-type {
margin-right: 0;
}
/*分页*/
.home-market-section .section-inner .swiper-container .swiper-pagination-bullets {
bottom: 50px;
}
.home-market-section .section-inner .swiper-container .swiper-pagination-bullet {
position: relative;
margin: 0 5px;
width: 24px;
height: 4px;
border-radius: 100px;
opacity: 1;
background: 0 0;
}
.home-market-section .section-inner .swiper-container .swiper-pagination-bullet:before {
content: '';
display: inline-block;
position: absolute;
width: 24px!important;
height: 4px;
opacity: 1;
left: 0;
border-radius: 100px;
background: #dfe1f1;
vertical-align: middle;
transition: opacity .8s, background-color .8s;
}
.home-market-section .section-inner .swiper-container .swiper-pagination-bullet-active {
opacity: 1;
}
.home-market-section .section-inner .swiper-container .swiper-pagination-bullet-active:before {
width: 24px!important;
opacity: 1;
border-radius: 100px;
transform: scale(1.2);
background: #38ffe3;
}
/*左右箭头*/
.home-market-section .section-inner .swiper-button-prev {
left: 0;
top: 118px;
margin-top: 0;
background: url(//repo.bfw.wiki/bfwrepo/icon/5ff8f2c747054.png);
background-size: cover;
}
.home-market-section .section-inner .swiper-button-next {
right: 0;
top: 118px;
margin-top: 0;
background: url(//repo.bfw.wiki/bfwrepo/icon/5ff8f2c747054.png);
transform: rotate(180deg);
background-size: cover;
}
.home-market-section .section-inner .swiper-button-next:hover {
}
.home-market-section .section-inner .swiper-button-prev:hover {
}
.pc-bg-container{
margin-top:100px;
}
</style>
<!--jquery框架-->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
</head>
<body>
<div class="pc-bg-container">
<div class="home-market-section">
<li class="section-title">
<a href="#">列表左右滑动</a>
</li>
<div class="section-inner">
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
<!--下文中的data-swiper-parallax属性是swiper的视差效果，如果觉得污染代码，可以删除-->
<div class="swiper-slide">
<a href="#" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<img src="//repo.bfw.wiki/bfwrepo/image/5ff8f9c4688b7.png" width="75">
<h3>标题信息1</h3>
<p>图片详细信息介绍1</p>
<div class="time"><span>￥11</span>/年</div>
</div>
</a>
<a href="#" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<img src="//repo.bfw.wiki/bfwrepo/image/5ff8f9d574eb5.png" width="75">
<h3>标题信息2</h3>
<p>图片详细信息介绍2</p>
<div class="time"><span>￥22</span>/年</div>
</div>
</a>
<a href="#" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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