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;}
.........完整代码请登录后点击上方下载按钮下载查看