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

该基于owl-carousel的卡片水平轮播展示特效的原文地址为：https://codepen.io/khadkamhn/pen/RxVKXP