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.85628.cc-七星彩创始人白秀华| www.88635.com-彩99苹果-| www.081229.com-北京单场推荐彩客网| www.207196.com-福彩3d直选过滤器| www.94504.com-彩票ab-| www.761695.com-彩之家怎么注册| www.879138.com-河南福彩开奖走势图| 天天彩票www.106326.com| www.286.online-七星彩内部绝密料| www.2201.vip-中国福利彩票3开奖| www.1775.xyz-爱中彩票官方| www.9116.xyz-k3k3的网址彩票| www.691489.com-最可靠的彩票app| www.819685.com-郑州福彩中心在哪| www.961645.com-唐三彩蓝釉拍卖价格| www.rg18.cc-快三免费的挂机软件| www.640519.com-彩民乐精华版| www.280521.com-时时彩号码开奖结果| 爱购彩www.23636h.com| www.200321.com-123彩票网-| www.354430.com-怎么样买彩票能中奖| www.86833.cc-竞彩猫合买微信群| www.768202.com-网络推广彩票犯法吗| www.291.live-爱购彩会黑钱吗| www.5083.top-购买世界杯足彩| www.174818.com-私彩哪个app靠谱| www.293739.com-福彩快三广西| www.8113.me-巨弘国际彩票| www.183958.com-河北体育彩票| www.8776.top-彩票大小有规律吗| www.066170.com-专业彩吧助手| www.811348.com-排列三论坛家彩网| www.021155.com-说彩-| www.4mw.cc-加拿大幸运彩票| www.212975.com-玩彩票最靠谱平台| www.259910.com-吉林快三走势图今天| www.567034.com-emoji彩虹旗帜| www.362032.com-中国彩吧资讯搜索| www.555036.com-全民福彩双色球| www.676798.com-藏宝图福彩-| www.799928.com-大发快三开奖现场| www.904997.com-足球彩票怎么玩法| www.998741.com-大小单双彩票软件| www.jc23.com-彩票小狂人胆码| www.7999.bid-app投彩-| www.365869.com-美丽的校园彩铅画| www.365675.cc-画彩铅画的必备工具| www.260350.com-彩票怎么选-| www.685749.com-掌上福利彩票| www.876601.com-福彩3d中奖条件| www.8310.in-大彩黄鹤楼-| www.884777.com-三彩彩票网站入口| www.o77.org-彩票领奖后-| www.4153.top-七彩染料-| www.495229.com-玩网上博彩犯法吗| www.hf43.com-官方快三辅助器| www.2999.top-福建体彩直播开奖| www.850771.com-京东彩票下载安装| www.945990.com-江西彩礼贵吗| www.cp615.com-神彩8-| www.zr21.com-大玩家彩票网上兑换| www.617587.com-重庆市体育彩票中心| www.722808.com-澳门正规博彩十网站| www.838458.com-手机买快三能赢吗| www.930210.com-篮球彩票胜负怎么玩| www.998088.com-国民彩票app登录| www.ge11.com-彩迷网下载-| www.27dx.com-合肥体彩店新报价| www.879902.com-105彩票违法吗| 鸿运彩票www.hy2733.com| www.yt90.com-51彩票计划网| www.96vw.com-8号彩票网提现不出| www.00734.cc-微信北京快三走势图| www.51055.cc-百盈快三软件| www.017088.com-152彩票安全吗| www.453480.com-什么是彩光嫩肤美白| www.577337.com-体彩17241开奖| www.348605.com-搜索乐彩网| www.493330.com-中体育彩票了| www.561791.com-开户送彩金-| www.623613.com-九歌彩票客户端下载| www.600069.com-打彩票是什么意思| www.687868.com-三彩女装专卖店服饰| www.759716.com-亿米彩是正规公司吗| www.12770.com-电脑彩资料报| www.91676.cc-日版好彩香烟好抽吗| www.29220.com-五星彩票官方下载| www.743598.com-购彩111骗局| 虹彩集团www.hcjt7.com| www.270896.com-七彩彩票app| www.53639.cc-山东高频体彩扑克牌| www.816515.com-今晚福彩3d试机号| www.099.in-快三百家号-| www.025075.com-河南福彩幸运彩任二| www.214191.com-约彩-| www.6876.vip-双色球中彩票秘籍| www.816989.com-今天开什么彩票开奖| www.661520.com-779彩票群-| www.806145.com-彩99正规吗-| www.am84.cc-江苏快三历史开奖| 500彩票网www.61655w.com| www.us19.com-中国体彩有基诺型| www.01ot.com-羽泉彩虹歌词意思| www.60jy.com-58同城春天彩票| www.889.pw-彩九九下载-| www.4388.cn-甘肃快三33期| www.47uo.com-彩票平投怎么赚钱| www.55404.com-一组彩票几位数字| www.684468.com-彩大乐透大彩网| www.396223.com-众大时时彩信誉平台| www.861379.com-安徽体彩网十一选| www.977851.com-足球彩票在哪买| www.fx58.com-黑彩被骗报警有用吗| www.2qd.com-彩票站买网络彩票| www.92sd.com-韩国足球彩票| www.26055.cc-江苏快三网购| www.033965.com-七乐彩票是什么鬼| www.168783.com-安徽快三今天走势图| www.88659.cc-彩票九彩-| www.205660.com-vip007彩票网| www.725805.com-c8彩票安卓版| www.9721.club-体育彩票机过户| www.977481.com-北京加盟彩妆店| www.722169.com-体彩门头图片| www.501930.com-深圳宏达彩-| www.143571.com-乐透彩票概率计算| www.28768.com-体育彩票不是赌博| www.177811.com-五分快三计划| www.288077.com-福彩网合买骗局| www.833963.com-彩票返水最高的平台| www.595412.com-淼鑫彩票app| www.0030.xyz-最大的彩票中奖者| www.789575.com-竞彩001玩法| www.944669.com-福利彩票有没有假| www.1925.vip-规模最大的87彩店| www.46689.com-好彩三复式注数计算| www.602001.com-体彩机选中奖概率| www.535124.com-数字型彩票黄金公式| www.379034.com-彩客网ckw-| www.17fu.com-电子彩票原理| www.67178.com-郑州福彩中心| www.242607.com-168彩票网可靠吗| www.3618.cc-中国体彩网快三| www.929292.cc-体彩七星彩如何兑奖| www.cp760.com-快三平台大全| www.4305.vip-乐彩论坛1750网| 凤凰彩票www.77803m.com| www.567463.com-彩虹六号无人机花屏| www.633594.com-百度天下彩-| www.194986.com-福利彩票快3玩法| www.875746.com-大彩网彩票| www.944541.com-85彩票-| www.96993.cc-单场足彩技术| www.094833.com-福彩三天胆预测| www.359312.com-体育彩票去哪| www.910416.com-澳客网足球彩票下载| 财神网www.29277j.com| www.700163.com-159彩票官网登录| www.rc7.cc-彩票快3开奖| www.721705.com-5分快三计划群| www.172712.com-快彩3app-| www.241717.com-北京快三势图一定牛| www.974016.com-体彩中3亿-| www.cp855.cc-手机快三投注网站|