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.39336.cc-六爻预测彩票3d法| www.415911.com-竞彩最佳倍投方案| www.94744.com-中国彩票销售额排名| www.131607.com-云南彩票中奖| www.237395.com-中国体彩网下载安装| www.353551.com-彩票查询号码重复| www.010191.com-澳客网足球竞彩| www.020092.com-完美彩票2-| www.11271.cc-烟台福利彩票转让| www.096729.com-中彩网3d专家推荐| www.29988.com-下载彩票8-| www.166495.com-快三走势图今天江苏| www.10rr.com-福利彩票幕后| www.1618.hk-非凡体彩走势图| www.28535.cc-福彩快三网页版| www.016016.cc-唯彩会苹果下载安装| www.156009.com-时时彩在线做号工具| www.290018.com-c8彩-| www.429300.com-彩虹伞打地鼠攻略| www.588085.com-七星彩正规的吗| www.715992.com-k8彩票55kk台| www.853611.com-彩客网胜负投注分析| www.963362.com-星光彩票大发快| www.cc82.com-彩票开奖快3| www.na42.com-微彩吧app下载| www.639411.com-彩票软件是违法的吗| www.717221.cc-彩铅对孩子的好处| www.801774.com-永红彩票线路导航| www.782003.com-中福彩传媒app| www.871969.com-七星彩31期-| www.949571.com-运盈彩票骗局| 中国福利彩票www.6364v.com| www.798633.com-极速时时彩基本走势| www.12263.cc-浙江快彩走势图表| www.002357.com-福少时时彩-| www.268268.com-福彩3d新彩网| www.ps18.com-珠江彩票官网| www.336041.com-广西福利彩开奖结果| www.77999.cc-湖南幸运快三| www.120940.com-福彩双色球选号机| www.237527.com-福彩3b字迷-| www.337965.com-海南福彩快2官方| www.429870.com-儿童水彩画-| www.05608.com-乐彩网快三-| www.887513.com-釉下五彩-| www.997472.com-快三群邀请码| www.eb67.com-百姓网彩票-| www.zy01.com-彩虹网络电视直播| www.031876.com-足彩翻倍跟单靠谱吗| www.841145.com-福彩3d055期| www.fi6.cc-时时彩0369规律| www.503515.com-投彩的意思-| www.761574.com-福利彩票的种类| www.72ih.com-大彩鲸11选5助手| www.6688.name-七彩国际美容华联| www.30167.com-599彩票苹果下载| www.97268.com-古建彩绘哪家好| www.065448.com-油性彩铅画教程| www.144217.com-足彩反着买-| www.31ft.com-彩虹岛冒险-| www.6lh.com-华阳彩票官网合买| www.28722.com-cc彩票会员登录| www.10638.com-c8cn万彩吧开奖| www.80064.com-时时彩玩法介绍| www.105773.com-时时彩手机宝典| www.77652.cc-彩票电子显示屏| www.105684.com-下载八亿彩应用| www.175272.com-彩票刷流水兼职| www.707027.com-今日竞彩足球吧| www.910130.com-高手彩坛一彩票大全| www.hl5.com-1分快3送彩金| www.48087.com-彩票牛牛玩法| www.101990.com-乐乐彩是什么意思| www.30dw.com-体彩刮刮乐兑奖问题| www.85882.cc-我附近的福利彩票站| www.811553.com-足彩加奖-| www.903752.com-万豪福彩app| www.971452.com-彩票赚钱是真的吗| www.pw3.com-快三怎么算中奖| www.za52.com-甘肃省体彩中心地址| www.849079.com-竞彩258官方客服| www.026496.com-高频彩的概率玩法| www.21963.com-彩票刷子群-| www.853095.com-苹果版彩6下载| www.770.com-双色球彩票预测专家| www.32078.com-福彩二十选三| www.561708.com-快三内蒙古024| www.101172.com-查询彩票是否中奖| www.005345.com-大众彩票app| www.128655.com-五星彩下载安装| www.641952.com-彩友才专家计划| www.772458.com-微信玩重庆时彩的群| www.213802.com-彩神11是官方| www.61736.cc-最新七星彩开奖图表| www.rv34.com-博牛彩票破解| www.381780.com-福彩3d今天开奖结| www.243938.com-彩96官方-| www.471888.cc-香港官网彩票| www.86293.com-博彩彩票app下载| www.14361.com-乐透彩票下载| www.69718.com-彩票源码免费下载网| www.456029.com-彩票输了十万| www.54ve.com-pk彩票平台-| www.4059.cc-七星彩一组头尾| www.628795.com-彩票代打兼职招聘| www.730107.com-一分钟易彩快3结果| www.816753.com-吉林快三怎么压能赢| www.933099.com-1分钟快三坑人的| www.cai747.cc-快三计划网页| www.kl10.com-易彩快3怎么下载| www.750811.com-彩经彩票是真的吗| www.853971.com-加拿大有几种彩票| www.923819.com-秒速时时彩开奖规律| www.983239.com-买彩票是赌博吗| www.ai24.com-七星彩论坛精选| www.728512.com-雪缘园足彩即时比分| www.799912.com-龙之彩官网下载安装| www.869357.com-南海七星彩投注网| www.930956.com-快三进群-| www.986463.com-周五竞彩足球彩客网| www.cp8585.com-人人快三彩票| www.505628.com-天天彩票助手破解版| www.15327.cc-彩票倍投不可取| www.028359.com-怎么制作彩票软件| www.105566.cc-彩票赚钱软件正规| www.513803.com-彩钢门厂家-| www.615431.com-入赘妻主多彩蒲香| www.678574.com-福彩3d精英心水网| www.737391.com-新彩网字谜大全| www.800402.com-网络彩票作弊器| www.869278.com-七星彩综合版走势图| www.928665.com-够力七星彩图案| www.990750.com-重庆7时彩是怎么玩| www.13292.cc-竞彩足彩360| www.62691.cc-极速快三博彩走势图| www.an93.com-贵州省快三开双色球| www.y29.cc-河北省11选5彩票| www.126258.com-泰安体彩中一等奖| www.242971.com-手机购彩网站| www.321954.com-下彩网网页版| www.396408.com-彩虹六号可达鸭头像| www.513979.com-彩票是谁控制的| www.586174.com-人人中彩票怎么了| www.096799.com-双色球中彩网| www.917358.com-私彩代理挣钱吗| www.js15.com-火箭的彩票平台| www.428160.com-博彩游戏网站| www.5277.cn-足球智彩-| www.as13.com-安徽快三跨度分析| www.98ib.com-炫彩粒子动态壁纸| www.01994.com-彩票真的把我害了| www.85853.com-彩涂钢卷-| www.072163.com-彩票外围是什么| www.174987.com-大发彩票官网| www.5137.tv-双色球播台赛中彩网| www.385658.com-体彩出什么号了今天| www.760745.com-南粤风采好彩3结果| www.885254.com-七星彩今睌开奖结果| www.338083.com-彩票中心福彩号码| www.401922.com-uk彩可靠吗-| www.953632.com-网上福彩正规网站| www.237096.com-网易彩票头条首页| www.301038.com-人人中彩票网| www.388830.cc-搜福彩开奖结果|