QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > swiper产品解决方案列表滚动布局代码

原创商用 swiper产品解决方案列表滚动布局代码

jQuery基于swiper.js制作主机商城产品案例和解决方案列表单排滚动布局,支持默认自动滚动、带左右按钮和索引分页控制效果代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<!--插件基本框架-->
<link rel="stylesheet" type="text/css" href="statics/css/swiper-3.4.2.min.css" />

<!--页面布局样式-->
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<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="statics/images/marketplace-selected-solution_0.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="statics/images/marketplace-selected-solution_1.png" width="100%">
							<h3>容灾备份解决方案</h3>
							<p>为客户提供容灾备份服务,保障企业关键数据安全可靠和业务连续性。</p>
							<dl class="overflow-hide cf">
								<dt>包含产品</dt>

								<dd>企业级数据保护即服务</dd>

								<dd>高可用i2Availability</dd>

								<dd>Veritas</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="statics/images/zhihuitingche.jpg" width="100%">
							<h3>智慧园区解决方案(智慧停车)</h3>
							<p>聚焦园区智慧停车场景,提供业界优质伙伴能力,打造智慧化停车解决方案能力。</p>
							<dl class="overflow-hide cf">
								<dt>包含产品</dt>

								<dd style="width: 100%">智慧交通一体化管理服务平台</dd>
							</dl>
							<span><a  href="#"><span class="arrow-more">了解详情</span><span class="arrow-f"></span></a>
							</span>
						</div>
					</div>
					<div class="col-sm-4 swiper-slide">
						<div class="solution-card">
							<img src="statics/images/shipinjiankong.jpg" width="100%">
							<h3>智慧园区解决方案(视频监控)</h3>
							<p>聚焦园区监控场景,依托云主机EI能力,构建智慧化、场景化视频监控综合解决方案。</p>
							<dl class="overflow-hide cf">
								<dt>包含产品</dt>

								<dd>园区企业视频监控</dd>

								<dd>消费者家庭视频监控</dd>

								<dd>雪亮工程视频监控</dd>
							</dl>
							<span><a  href="#"><span class="arrow-more">了解详情</span><span class="arrow-f"></span></a>
							</span>
						</div>
					</div>
					<div class="col-sm-4 swiper-slide">
						<div class="solution-card">
							<img src="statics/images/zhihuijiaoyu.jpg" width="100%">
							<h3>智慧教育解决方案</h3>
							<p>基于云主机提供端到端智慧教育解决方案,涵盖智慧校园、智慧课堂、实训云平台等场景。</p>
							<dl class="overflow-hide cf">
								<dt>包含产品</dt>

								<dd>泰克双创实践云平台</dd>
							</dl>
							<span><a  href="#"><span class="arrow-more">了解详情</span><span class="arrow-f"></span></a>
							</span>
						</div>
					</div>
					<div class="col-sm-4 swiper-slide">
						<div class="solution-card">
							<img src="statics/images/marketplace-selected-solution_5.jpg" width="100%">
							<h3>融合媒体解决方案</h3>
							<p>基于云主机服务,面向大传媒行业用户提供“云+网+端”三位一体的一站式融合媒体解决方案。</p>
							<dl class="overflow-hide cf">
								<dt>包含产品</dt>

								<dd>智慧媒体云平台</dd>
							</dl>
							<span><a  href="#"><span class="arrow-more">了解详情</span><span class="arrow-f"></span></a>
							</span>
						</div>
					</div>
					<div class="col-sm-4 swiper-slide">
						<div class="solution-card">
							<img src="statics/images/marketplace-selected-solution_7.jpg" width="100%">
							<h3>智慧医疗解决方案(医疗影像云)</h3>
							<p>精准诊治医疗影像云平台,云化放射、超声等医疗业务,实现医生、患者、医疗过程等云上互动。</p>
							<dl class="overflow-hide cf">
								<dt>包含产品</dt>
								<dd>影像数据云服务</dd>

								<dd>临床影像协同</dd>

								<dd>全医技云服务</dd>

								<dd>区域医技协同</dd>
							</dl>
							<span><a  href="#"><span class="arrow-more">了解详情</span><span class="arrow-f"></span></a>
							</span>
						</div>
					</div>
				</div>
				<div class="swiper-pagination solution-pagination"></div>
			</div>
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function() {
		new Swiper(".swiper-container", {
		
			//默认功能属性
			speed: 250,
			slidesPerView: 3,
			spaceBetween: 0,
			slidesPerGroup: 3,
			loop: true,
			autoplay: true,
			
			//分页索引
			pagination: {
				el: ".swiper-pagination",
				clickable: true
			},
			
			//分页按钮
			navigation: {
				nextEl: ".swiper-button-next",
				prevEl: ".swiper-button-prev"
			}

		});
	})
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
金福彩票 www.179868.com-快三上跨定下期跨度| www.884105.com-杏彩-| www.715793.com-网络彩票网站案例| www.5265.xyz-南国彩票七星彩早版| www.267511.com-福利彩票筛选器| www.cp1126.com-彩票平台注册送19| www.ev24.com-手机中彩网zucp| www.189633.com-福彩快三遗漏| www.r34.cx-香港快三玩法技巧| www.687158.com-江南彩姐彩宝贝| www.828138.com-春彩彩票-| www.947656.com-福彩格式-| www.71ux.com-彩店宝下载软件| www.7639.xyz-重庆时时采彩宝典| www.82728.cc-足彩19024彩果| www.193523.com-关于长春逸彩快三| www.353098.com-福利彩双色球走势| www.537581.com-乐享彩票网-| www.736710.com-体育彩票上海| www.948914.com-百度乐彩怎么了| www.rj.com-中彩网走势图| www.11xh.com-合肥体彩中奖| www.5938.cm-大中华彩票注册| www.69882.com-足球彩票怎样看| www.137903.com-福利彩票官方投注器| www.303367.com-七彩汇下载链接| www.458640.com-足彩竞猜301| www.618608.com-快三和值11是大么| www.022893.com-重庆彩票中心官网| www.997.space-vr十分彩链接| www.13500.cc-彩票算号网站| www.008353.com-卖私彩怎么判刑| www.221560.com-安卓版01彩票| www.371848.com-亚洲杯竞彩名词玩法| www.413378.com-炫乐彩票官网| www.541535.com-幸运彩开奖结果| www.92716.com-jc聚彩彩票平台| www.125417.com-三d福彩专家预测| www.283365.com-七星彩怎么算中奖| www.458027.com-如何看体彩走势图| www.590888.com-298彩票下载| www.694931.com-常州彩票得主| www.e99.shop-七星彩开奖日期表| www.2112.org-七乐彩42期-| www.56445.com-石家庄体彩中心| www.174818.com-私彩哪个app靠谱| www.874259.com-彩票平台程序一条龙| www.92918.com-65彩票网站-| www.961129.com-福利彩票10分快3| www.764701.com-打开拼搏在线彩票网| www.oi94.com-今日福彩开奖查询| www.49cq.com-排列三夸度彩乐乐| www.yo79.com-彩票胆拖-| www.02fr.com-彩民堂客户端下载| www.654034.com-cc国际彩票网投| www.537881.com-什么是有彩色系| www.mk52.com-新的时时彩网站| www.759177.com-微彩特区七星论坛| www.1029.wang-广东11选五爱彩乐| www.72353.cc-奔驰彩票app下载| www.110876.com-彩票节后什么时开售| www.254271.com-百度彩票网旺彩社区| www.383865.com-山西福利彩票app| www.570251.com-体彩排列五历史奖号| www.775053.com-网易人人中彩票没有| www.925800.com-七乐彩除6走势图| www.1221.pw-湖北快三盘口| www.89594.com-好彩连连-| 爱购彩票www.063552.com| www.tb33.com-彩票品种大全| www.851098.com-竞彩足球初赔| www.78936.com-手机彩铃怎么换| www.3659.net-贵宾室彩票网址| www.29282.cc-内蒙古快三彩票| www.121844.com-吉利时时彩开彩结果| 超级彩票www.811672.com| www.61715.cc-大胜彩票违规网站| www.33810.com-玖玖彩票app下载| www.128152.com-彩票361手机登陆| www.pe6.com-吉林快三预测软件| www.28dt.com-彩票如何看五星| www.103470.com-广东新粤彩每期报| www.ba16.com-下载内蒙古福利彩票| 澳客彩票www.277ak.com| www.i48.bid-国彩网投彩票可靠吗| www.620716.com-彩色混凝土供应| www.99ut.com-中国福利彩票可以买| www.04159.com-聚象彩是不是骗局| www.052665.com-手机买彩票网| www.434315.com-cc中彩网堂-| www.845795.com-2018福彩事件| 金冠彩票www.49956q.com| www.148040.com-乐优炫彩手机版下载| www.954774.com-19年彩票中奖记录| www.19951.com-吉林快三和数表| www.101667.com-新彩票网走势图首页| www.328678.com-中彩网5oo网站| www.40ww.com-2019七星彩大奖| www.083643.com-足彩18098-| www.4158.biz-七彩旅游公有链骗局| www.zg93.com-七乐彩专家杀号推荐| www.75jp.com-什么是炒彩票| www.45583.com-彩薇花护肤品怎么样| www.394681.com-青岛体彩兑奖| www.110594.com-福彩15选5开| www.396693.com-彩虹照片背景图片| www.618213.com-体彩新彩吧-| www.762953.com-青海快三今日预测号| www.180981.com-河北快三一定牛今天| www.28870.com-nba彩票ios-| www.fc59.com-速赢彩骗局-| www.610938.com-百宝彩用户怎么登录| www.457075.com-美国彩票哪里买| www.634230.com-甘肃旺豪快三| www.995314.com-香港五分彩的规律| www.1952.vip-福彩今天相年图| www.537155.com-彩色的东西-| www.846876.com-足彩外围玩法规则| www.965654.com-51彩票软件-| www.qz60.com-五分快三的玩法| www.3390.vip-易购彩票是真的吗| www.34551.com-上海福利彩票下载| www.131432.com-彩票开奖号是多少| www.35618.com-彩票代玩兼职群在哪| www.008127.com-星期五是什么彩票| www.88810.com-美彩彩票下载| www.186514.com-旺彩app-| www.po07.com-竞彩500足球| www.60zr.com-搜索青蛙彩-| www.86691.cc-莱利彩票害死人| www.65oj.com-大连福利彩票官网| www.810983.com-竞彩单场比分奖金| www.954746.com-计划快三软件| www.ur6.com-123手机彩票网| www.029832.com-彩客网电脑版网页| www.53651.cc-体彩大乐透销售点| www.099930.com-炫乐彩票网址多少| www.720084.com-锋彩直播手机版官网| www.96127.cc-福彩网专业技能知识| www.240255.com-快三导师是干什么的| www.575829.com-6288彩票靠谱嘛| www.788182.com-足球彩票19046| www.ve7.com-福利彩票3d谜语| www.11770.cc-广东彩王准确资料| www.507612.com-福彩开将结果查询| www.661046.com-9号彩票平台登录| www.795778.com-新加坡天天彩网站| www.919571.com-江苏快三多少一注| www.fs2.cc-网警是怎么抓时时彩| www.15033.com-全民彩是合法的吗| www.212680.com-彩票软件官网| www.pw5.cc-买快三-| www.01239.com-送彩金的游戏| www.af23.com-网彩-| www.328394.com-七星彩开奖直播室| www.814205.com-快三群犯法吗| www.17677.com-开彩票店需要什么| www.655672.com-爱彩乐旧版走势图| www.245385.com-易彩堂官方网站登录| www.ew2.com-广西十分彩开奖直播| www.yl21.com-彩票网上买投注站网| www.73rj.com-彩民杀蓝专栏| www.6923.cc-七彩阳光恶搞| www.42181.com-彩票12安全吗|