swiper软件产品列表左右滚动代码
图片代码 次 2019-04-01swiper软件提供高效的左右滚动产品列表解决方案，配备简洁易懂的图片代码，轻松实现网页内容的优雅展示。无论是提升用户体验还是增强品牌形象，swiper都是您的理想选择。
jQuery基于swiper.js制作响应式的主机商城软件产品项目列表布局，通过左右按钮控制产品列表滚动。默认支持自动滚动效果代码。
[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程
使用方法：
1、head引入css文件
<!--swiper框架样式--> <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文件
<!--jquery框架--> <script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
3、body引入HTML代码
<div class="pc-bg-container">
<div class="home-market-section">
<li class="section-title">
<a href="#">主机商城</a>
</li>
<div class="section-inner">
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
<!--下文中的data-swiper-parallax属性是swiper的视差效果，如果觉得污染代码，可以删除-->
<div class="swiper-slide">
<a href="#" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<img src="statics/images/20180921020340_20340.png" width="75">
<h3>企业云盘</h3>
<p>企业文件存储管理与协作云平台</p>
<div class="time"><span>￥1155</span>/年</div>
</div>
</a>
<a href="#" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<img src="statics/images/20181207091159_89245.png" width="75">
<h3>泰克双创实践云平台</h3>
<p>基于云主机建设的多功能实训平台</p>
<div class="time"><span>￥1550000</span>/年</div>
</div>
</a>
<a href="#" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<img src="statics/images/20180921020451_45996.png" width="75">
<h3>视频云服务套餐</h3>
<p>快速开启直播，引燃商业价值</p>
<div class="time"><span>￥3600</span>/年</div>
</div>
</a>
<a href="#" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<img src="statics/images/20180921020526_82811.png" width="75">
<h3>迅响响应式定制建站</h3>
<p>开年大吉，建站立减2000</p>
<div class="time"><span>￥800</span>/年</div>
</div>
</a>
</div>
<div class="swiper-slide">
<a href="#" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<img src="statics/images/20180921020703_68805.png" width="75">
<h3>智迅云客服</h3>
<p>新一代的云客服解决方案</p>
<div class="time"><span>￥180</span>/月</div>
</div>
</a>
<a href="#" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<img src="statics/images/20190117112043_63875.png" width="75">
<h3>云匣子</h3>
<p>多终端运维的云堡垒机</p>
<div class="time"><span>￥360</span>/月</div>
</div>
</a>
<a href="#" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<img src="statics/images/20190117112001_88334.png" width="75">
<h3>交管局满分学习系统</h3>
<p>文件上传、在线转码、存储管理</p>
<div class="time"><span>￥200000</span>/年</div>
</div>
</a>
<a href="#" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<img src="statics/images/20190117111422_72284.png" width="75">
<h3>金华威云视频会议</h3>
<p>新一代云视频会议解决方案</p>
<div class="time"><span>￥800</span>/年</div>
</div>
</a>
</div>
<div class="swiper-slide">
<a href="#" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<img src="statics/images/20190117111315_56863.png" width="75">
<h3>虚拟化下一代防火墙</h3>
<p>All in One设计的虚拟防火墙</p>
<div class="time"><span>￥1600</span>/年</div>
</div>
</a>
<a href="#" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<img src="statics/images/20190117111227_50389.png" width="75">
<h3>云图管家</h3>
<p>简单高效地保障企业文件资料安全</p>
<div class="time"><span>￥5000</span>/次</div>
</div>
</a>
<a href="#" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<img src="statics/images/20190223102649_33013.png" width="75">
<h3>永洪敏捷BI</h3>
<p>云上的数据展示分析工具</p>
<div class="time"><span>￥200</span>/月</div>
</div>
</a>
<a href="#" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
<div class="inner-content">
<img src="statics/images/20190117110258_76566.png" width="75">
<h3>网银混合云咨询实施服务</h3>
<p>提供咨询、规划、设计和实施服务</p>
<div class="time"><span>￥1050000</span>/次</div>
</div>
</a>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
new Swiper(".pc-bg-container .home-market-section .swiper-container", {
loop: !0,
speed: 500,
autoplay: {
delay: 3e3,
disableOnInteraction: false
},
slidesOffsetBefore: 0,
parallax: !0,
pagination: {
el: ".pc-bg-container .swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
})
});
</script>
文件目录
本资源来自：代码 » 图片代码 » swiper软件产品列表左右滚动代码
注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！
jquery仿百度AI官网banner图片代码
« 上一篇
2019年03月07日
swiper热门商品图片层叠轮播特效
下一篇 »
2019年07月25日
1、如非特殊说明，本站对本文提供的代码或者素材不拥有任何权利，其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
