swiper產(chǎn)品解決方案列表滾動(dòng)布局代碼

使用方法：

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>從研發(fā)設(shè)計(jì)仿真到生產(chǎn)車間現(xiàn)場的全流程數(shù)字化、智能化變革，實(shí)現(xiàn)敏捷創(chuàng)新、精細(xì)化運(yùn)營。</p>
							<dl class="overflow-hide cf">
								<dt>包含產(chǎn)品</dt>

								<dd>云設(shè)計(jì)</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>容災(zāi)備份解決方案</h3>
							<p>為客戶提供容災(zāi)備份服務(wù)，保障企業(yè)關(guān)鍵數(shù)據(jù)安全可靠和業(yè)務(wù)連續(xù)性。</p>
							<dl class="overflow-hide cf">
								<dt>包含產(chǎn)品</dt>

								<dd>企業(yè)級(jí)數(shù)據(jù)保護(hù)即服務(wù)</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>智慧園區(qū)解決方案（智慧停車）</h3>
							<p>聚焦園區(qū)智慧停車場景，提供業(yè)界優(yōu)質(zhì)伙伴能力，打造智慧化停車解決方案能力。</p>
							<dl class="overflow-hide cf">
								<dt>包含產(chǎn)品</dt>

								<dd style="width: 100%">智慧交通一體化管理服務(wù)平臺(tái)</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>智慧園區(qū)解決方案（視頻監(jiān)控）</h3>
							<p>聚焦園區(qū)監(jiān)控場景，依托云主機(jī)EI能力，構(gòu)建智慧化、場景化視頻監(jiān)控綜合解決方案。</p>
							<dl class="overflow-hide cf">
								<dt>包含產(chǎn)品</dt>

								<dd>園區(qū)企業(yè)視頻監(jiān)控</dd>

								<dd>消費(fèi)者家庭視頻監(jiān)控</dd>

								<dd>雪亮工程視頻監(jiān)控</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>基于云主機(jī)提供端到端智慧教育解決方案，涵蓋智慧校園、智慧課堂、實(shí)訓(xùn)云平臺(tái)等場景。</p>
							<dl class="overflow-hide cf">
								<dt>包含產(chǎn)品</dt>

								<dd>泰克雙創(chuàng)實(shí)踐云平臺(tái)</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>基于云主機(jī)服務(wù)，面向大傳媒行業(yè)用戶提供“云+網(wǎng)+端”三位一體的一站式融合媒體解決方案。</p>
							<dl class="overflow-hide cf">
								<dt>包含產(chǎn)品</dt>

								<dd>智慧媒體云平臺(tái)</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>智慧醫(yī)療解決方案（醫(yī)療影像云）</h3>
							<p>精準(zhǔn)診治醫(yī)療影像云平臺(tái)，云化放射、超聲等醫(yī)療業(yè)務(wù)，實(shí)現(xiàn)醫(yī)生、患者、醫(yī)療過程等云上互動(dòng)。</p>
							<dl class="overflow-hide cf">
								<dt>包含產(chǎn)品</dt>
								<dd>影像數(shù)據(jù)云服務(wù)</dd>

								<dd>臨床影像協(xié)同</dd>

								<dd>全醫(yī)技云服務(wù)</dd>

								<dd>區(qū)域醫(yī)技協(xié)同</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", {
		
			//默認(rèn)功能屬性
			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>