QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 圖片代碼 > swiper產品解決方案列表滾動布局代碼

双色球旧版走势分布图: VIP商用 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>企業級數據?;ぜ捶?lt;/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天

知道了