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

代码语言：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:" ";display:table;line-height:0}
.cf:after{clear:both}
.selected-solution .solution-cardlist .col-sm-4 .solution-card dl dt{margin-bottom:10px;font-size:14px;color:#252b3a;letter-spacing:.51px;line-height:19px;position:relative}
.selected-solution .solution-cardlist .col-sm-4 .solution-card dl dt:before{position:absolute;display:inline-block;left:-8px;top:7px;content:'';vertical-align:middle;width:4px;height:4px;border-radius:50%;background:#252b3a}
.selected-solution .solution-cardlist .col-sm-4 .solution-card dl dd{float:left;width:50%;margin-bottom:6px;font-size:12px;color:#a0a2a8;letter-spacing:.44px;line-height:20px}
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span{margin:20px 30px 0;font-size:14px;display:inline-block;color:#666a75;letter-spacing:.51px;line-height:22px;opacity:0;transition:opacity .15s linear}
.selected-solution .solution-cardlist .col-sm-4:hover .solution-card>span{opacity:1;transition:opacity .2s linear 50ms}
/*了解更多*/
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span a span{display:inline-block;vertical-align:middle}
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span a span.arrow-f{width:13px;height:13px;background:url(//repo.bfw.wiki/bfwrepo/svg/swiper/marketplace-selected-arrow0.svg);display:inline-block;vertical-align:middle;margin-left:5px;position:relative;transition:.3s ease-out}
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span a:hover{color:#e6c16c}
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span a:hover span.arrow-f{transform:translate(4px,0);background:url(//repo.bfw.wiki/bfwrepo/svg/swiper/marketplace-selected-arrow2.svg)}
/*重置swiper*/
.swiper-container-horizontal>.swiper-pagination-bullets.solution-pagination{bottom:15px}
.solution-pagination .swiper-pagination-bullet{width:24px;height:4px;border-radius:100px;overflow:hidden;background:#dfe1f1;border:none;cursor:pointer;content:'';display:inline-block;box-sizing:border-box;opacity:1;vertical-align:middle}
.solution-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#f66f6a;box-sizing:border-box}
.swiper-container-solution .swiper-button-prev{left:0;width:14.5px;height:30px;margin-top:0;background-image:url(//repo.bfw.wiki/bfwrepo/svg/swiper/marketplace-home-arrow_big.svg);background-size:cover;transition:background-image .15s}
.swiper-container-solution .swiper-button-next{right:0;width:14.5px;height:30px;margin-top:0;background-image:url(//repo.bfw.wiki/bfwrepo/svg/swiper/marketplace-home-arrow_big.svg);transform:rotate(180deg);background-size:cover;transition:background-image .15s}
.swiper-container-solution .swiper-button-next:hover,.swiper-container-solution .swiper-button-prev:hover{background-image:url(//repo.bfw.wiki/bfwrepo/svg/swiper/marketplace-home-arrow_big_hover.svg);transition:background-image .2s}
</style>

</head>

<body>


<div class="swiper-container-solution">
	<div class="selected-solution">
		<div>
			<div class="swiper-container">
				<div class="layer-title">解决方案</div>
				<div class="solution-cardlist swiper-wrapper">
					<div class="col-sm-4 swiper-slide">
						<div class="solution-card">
							<img src="//repo.bfw.wiki/bfwrepo/image/5e44fafbdc615.png" width="100%">
							<h3>智能制造解决方案</h3>
							<p>从研发设计仿真到生产车间现场的全流程数字化、智能化变革，实现敏捷创新、精细化运营。</p>
							<dl class="overflow-hide cf">
								<dt>包含产品</dt>

								<dd>云设计</dd>

								<dd>云仿真</dd>

							</dl>
							<span><a  href="#"><span class="arrow-more">了解详情</span><span class="arrow-f"></span></a>
							</a>
							</span>
						</div>
					</div>
					<div class="col-sm-4 swiper-slide">
						<div class="solution-card">
							<img src="//repo.bfw.wiki/bfwrepo/image/5dec9f978faf3.png" width="100%">
							<h3>容灾备份解决方案</h3>
							<p>.........完整代码请登录后点击上方下载按钮下载查看