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

});

});

總結

以上是生活随笔為你收集整理的新年快乐轮播特效html,基于owl-carousel的卡片水平轮播展示特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。