这是一款基于owl-carousel的卡片水平轮播展示特效。该卡片轮播展示特效可以通过前后导航按钮来切换卡片，它是响应式设计，在手机等小屏幕设备上，会自动调节为只展示一个卡片。
使用方法
在页面中引入bootstrap.css和style.css文件，以及jquery和owl.carousel.min.css和owl.carousel.min.js文件。
HTML结构
该卡片水平轮播展示特效的基本的使用方法如下：
标题
描述信息
......
Javascript
在页面DOM元素加载完毕之后，通过下面的方法来初始化owl-carousel插件。
$(function(){
$('.mhn-slide').owlCarousel({
nav:true,
//loop:true,
slideBy:'page',
rewind:false,
responsive:{
0:{items:1},
480:{items:2},
600:{items:3},
1000:{items:4}
},
smartSpeed:70,
onInitialized:function(e){
$(e.target).find('img').each(function(){
if(this.complete){
$(this).closest('.mhn-inner').find('.loader-circle').hide();
$(this).closest('.mhn-inner').find('.mhn-img').css('background-image','url('+$(e.target).attr('src')+')');
}else{
$(this).bind('load',function(e){
$(e.target).closest('.mhn-inner').find('.loader-circle').hide();
$(e.target).closest('.mhn-inner').find('.mhn-img').css('background-image','url('+$(e.target).attr('src')+')');
});
}
});
},
navText:['','']
});
});
