swiper实现简洁商品横向滚动切换效果代码-html代码-BFW代码库

swiper实现简洁商品横向滚动切换效果代码

代码语言：html

所属分类：幻灯片

代码描述：swiper实现简洁商品横向滚动切换效果代码

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

<!DOCTYPE html>
<html>

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

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.min.css">
<style>
    *{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;}
body{min-width: 1440px;}
img{vertical-align: middle;max-width: 100%;}
.main{width: 1200px;height: auto;margin: 0 auto;position: relative;}
/*产品展示*/
.product{width: 100%;padding-top: 180px;padding-bottom: 150px;}
.product-top{padding-bottom: 70px;width: 100%;}
.product-top ul li{display: flex;justify-content: space-between;align-items: center;}
.product-top ul li .l{padding: 0 140px 0 50px;width: 100%;}
.product-top ul li .r{width: 100%;}
.product-top ul li p.title-en{font-size: 14px;color: #b7b5b2;padding-bottom: 20px;}
.product-top ul li p.title{font-size: 46px;color: #1e1b16;padding-bottom: 10px;font-weight: bold;}
.product-top ul li p.price{font-size: 22px;color: #1e1b16;padding-bottom: 20px;font-weight: bold;}
.product-top ul li p.desc{font-size: 11px;color: #aaa9a7;padding-bottom: 60px;line-height: 25px;}
.product-top a.btn{font-size: 18px;color: #1e1b16;}
.product-top a.btn:hover span{font-weight: normal;}
.product-thumbs{padding: 20px;}
.product-thumbs .swiper-slide{padding: 0 25px;text-align: center;}
.product-thumbs .swiper-slide .item{padding: 50px 25px;}
.product-thumbs .swiper-slide .item .title{font-size: 20px;color: #1e1b16;padding-top: 45px;padding-bottom: 5px;}
.product-thumbs .swiper-slide .item .title-en{font-size: 12px;color: #b7b5b2;padding-bottom: 15px;}
.product-thumbs .swiper-slide img{width: 100%;max-width: 100%;}
.product-thumbs .swiper-slide.swiper-slide-active .item{box-shadow: 0px 0px 20px rgba(200,200,200,.5);}
.product-thumbs .swiper-slide:hover .item{box-shadow: 0px 0px 20px rgba(200,200,200,.5);}

.product .swiper-button-next,.product  .swiper-button-prev{top: auto;bottom: 20%;width: 54px;height: 54px;}
.product .swiper-button-next{background:url(../images/right-arrow.png) center center no-repeat;right: -70px;}
.product .swiper-button-prev{background:url(../images/left-arrow.png) center center no-repeat;left: -70px;}
/*通用按钮*/
.btn{display: inline-block;padding: 13px 80px 13px 50px;background:url(../images/icon-btn-arrow.png) right 8px center no-repeat #ffa800;font-size: 22px;color: #1e1b16;border-radius: 80px;}
.btn.btn-white{background-color: #FFFFFF;}
.btn span{transition: all .1s;}
.btn:hover span{padding-right: 2px;transition: all .1s;font-weight: bold;}
</style>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/swiper.min.js"></script>
</head>

<body>

<div class="product">
	<div class="main">
		<div class="swiper-container product-top">
			<ul class="swiper-wrapper">
				<li class="swiper-slide">
					<div class="l">
						<p class="title-en">Tshirt </p>
						<p class="title">男士运动上衣</p>
						<p class="price">￥2800.00</p>
						<p class="desc">A young and vigorous brand, to improve the office environment, give the work of higher value as its own responsibility. We are determined to create an efficient </p>

						<a href="#" class="btn"><span>查看详情</span></a>.........完整代码请登录后点击上方下载按钮下载查看