swiper实现图文产品服务列表卡片滚动效果代码-html代码-BFW代码库

swiper实现图文产品服务列表卡片滚动效果代码

代码语言：html

所属分类：幻灯片

代码描述：swiper实现图文产品服务列表卡片滚动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>

<!--插件基本框架-->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.4.5.1.css">
<!--页面布局样式-->
<style>
    @charset "utf-8";


*{padding:0;margin:0;font-family:"微软雅黑";box-sizing:border-box;outline:none}
:after,:before{box-sizing:inherit}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.col-sm-4{float:left;position:relative;width:33.33333333%}
.selected-solution{height:695px;background:#f1f3ff}
.selected-solution>div{position:relative;width:1270px;margin:0 auto}
.selected-solution .swiper-container{height:695px;width:1200px}
.selected-solution .layer-title{color:#393b40;padding:50px 0 30px;text-align:center;font-size:30px;letter-spacing:1.09px}
/*主体列表*/
.selected-solution .solution-cardlist{max-width:1200px;margin:20px auto 0}
.swiper-slide,.swiper-wrapper{height:560px!important}
.selected-solution .solution-cardlist .col-sm-4{padding:0 10px;top:0;transition:all .15s linear;box-sizing:border-box}
.selected-solution .solution-cardlist .col-sm-4 .solution-card{height:480px;background:#fff;border-radius:6px;text-align:left;overflow:hidden;transition:all .15s linear}
.selected-solution .solution-cardlist .col-sm-4:hover{position:relative;top:-20px;transition:all .25s linear}
.selected-solution .solution-cardlist .col-sm-4:hover .solution-card{height:530px;box-shadow:0 10px 40px 0 rgba(0,0,0,.1);transition:all .2s linear}
.selected-solution .solution-cardlist .col-sm-4 .solution-card img{width:auto;height:200px;transition:all .2s linear}
.selected-solution .solution-cardlist .col-sm-4 .solution-card h3{margin:20px 30px 10px;font-size:18px;color:#252b3a;letter-spacing:.65px;text-align:left}
.selected-solution .solution-cardlist .col-sm-4 .solution-card p{margin:0 30px;padding-bottom:30px;font-size:14px;color:#666a75;letter-spacing:.51px}
.selected-solution .solution-cardlist .col-sm-4 .solution-card dl{margin:0 30px;overflow:visible}
.cf:after,.cf:before{content:".........完整代码请登录后点击上方下载按钮下载查看