新年快乐轮播特效html,基于owl-carousel的卡片水平轮播展示特效

这是一款基于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:['','']

});

});