jQuery基于Swiper制作响应式的图片列表左右滚动，悬停图片遮罩文字切换效果。适用于项目解决方案产品列表响应式布局代码。
使用方法：
1、head引入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="service-title">
<h2>解决方案</h2>
<p>面向各种领域：教育、装修、安防、旅游、企业、集团公司等网站建设、营销网建设解决方案、品牌网站设计等建站服务。</p>
</div>
<div class="solution-box">
<div class="solution-cut">
<button class="fa fa-back"></button>
<button class="fa fa-more"></button>
<div class="solution-swiper">
<ul class="solution-wrapper">
<li class="solution-slide">
<span>
<i class="fa fa-wxbgongju"></i>
<hr>
<h3>企业网站建设解决方案</h3>
<p>好推建站全面提升品牌、提高技术、完善服务。推动中国互联网共同成长。</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/1.jpg'>
</li>
<li class="solution-slide">
<span>
<i class="fa fa-wxbgongju"></i>
<hr>
<h3>营销型网站解决方案</h3>
<p>好推建站-互联网思维，营销技巧，SEO推广方式帮助企业获得客户流。</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/2.jpg'>
</li>
<li class="solution-slide">
<span>
<i class="fa fa-wxbgongju"></i>
<hr>
<h3>HTML5响应式网站解决方案</h3>
<p>好推建站，针对移动互联网时代，好推提供企业HTML5响应式网站建设解决方案。</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/3.jpg'>
</li>
<li class="solution-slide">
<span>
<i class="fa fa-all"></i>
<hr>
<h3>集团网站建设解决方案</h3>
<p>好推建站-专注于集团网站建设、设计开发、集团群站整体解决方案。</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/4.jpg'>
</li>
<li class="solution-slide">
<span>
<i class="fa fa-security"></i>
<hr>
<h3>品牌网站定制解决方案</h3>
<p>好推建站-网站定制服务主要针对品牌需求，专业定制属于自己的品牌网站。</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/5.jpg'>
</li>
<li class="solution-slide">
<span>
<i class="fa fa-huanhuobz"></i>
<hr>
<h3>外贸网站建设解决方案</h3>
<p>好推建站-帮助企业开拓海外市场业务，外贸网站建设解决方案。</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/6.jpg'>
</li>
<li class="solution-slide">
<span>
<i class="fa fa-aniukefu2"></i>
<hr>
<h3>装修行业网站建设解决方案</h3>
<p>好推建站为装修企业提供全方位数据分析，地区用户需求分析，网站建设整体解决方案。</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/7.jpg'>
</li>
<li class="solution-slide">
<span>
<i class="fa fa-set1"></i>
<hr>
<h3>机械行业网站建设解决方案</h3>
<p>好推建站针对机械行业，通过对客户需求，用户数据分析，做出网站建设整体解决方案。</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/8.jpg'>
</li>
<li class="solution-slide">
<span>
<i class="fa fa-wxbgongju"></i>
<hr>
<h3>LED行业网站建设解决方案</h3>
<p>好推建站-为LED行业提供网站建设解决方案,充分体现LED产品的品牌优势，重点塑造品牌个性化形象。</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/9.jpg'>
</li>
<li class="solution-slide">
<span>
<i class="fa fa-naozhong"></i>
<hr>
<h3>IT软件系统网站建设整体解决方案</h3>
<p>好推建站为IT软件系统企业，提供网站建设整体的解决方案和应对措施。</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/10.jpg'>
</li>
<li class="solution-slide">
<span>
<i class="fa fa-suo"></i>
<hr>
<h3>行业门户网站建设解决方案</h3>
<p>好推建站，专业为企业、政府、不同领域提供高品质的大型门户网站建设解决方案。</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/11.jpg'>
</li>
<li class="solution-slide">
<span>
<i class="fa fa-wxbgongju"></i>
<hr>
<h3>生态农业网站建设解决方案</h3>
<p>好推建站助力-生态农业，新农业发展，新农业健康食品发展网站建设解决方案。</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/12.jpg'>
</li>
<li class="solution-slide">
<span>
<i class="fa fa-wxbgongju"></i>
<hr>
<h3>环保节能网站建设解决方案</h3>
<p>好推建站专业的设计师根据节能环保公司的需求，采用最新表现技术全面设计，充分体现公司的企业形象</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/13.jpg'>
</li>
<li class="solution-slide">
<span>
<i class="fa fa-wxbgongju"></i>
<hr>
<h3>房地产网站建设解决方案</h3>
<p>好推建站提供房地产网站建设方案，采用先进的HTML5技术，完整的布局给企业带来的经济效益立竿见影。</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/14.jpg'>
</li>
<li class="solution-slide">
<span>
<i class="fa fa-wxbgongju"></i>
<hr>
<h3>教育培训网站建设解决方案</h3>
<p>在互联网高速发展的今天,好推建站为教育培训企业提供网站建设整体解决方案。</p>
<a href="#">查看详情</a>
</span>
<img src='statics/images/15.jpg'>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
new Swiper('.solution-swiper',{
wrapperClass: 'solution-wrapper',
slideClass: 'solution-slide',
slidesPerView: 'auto',
loop: true,
observer:true,
observeParents: true,
centeredSlides: true,
prevButton: '.solution-cut .fa-back',
nextButton: '.solution-cut .fa-more'
});
});
</script>
