这是一款基于owl-carousel的卡片水平轮播展示特效。该卡片轮播展示特效可以通过前后导航按钮来切换卡片,它是响应式设计,在手机等小屏幕设备上,会自动调节为只展示一个卡片。
使用方法
在页面中引入bootstrap.css和style.css文件,以及jquery和owl.carousel.min.css和owl.carousel.min.js文件。
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/owl.carousel.min.js"></script>
HTML结构
该卡片水平轮播展示特效的基本的使用方法如下:
<div class="container"> <div class="mhn-slide owl-carousel"> <div class="mhn-item"> <div class="mhn-inner"> <img src="https://source.unsplash.com/600x400/?paper"> <div class="mhn-img"> <div class="loader-circle"> <div class="loader-stroke-left"></div> <div class="loader-stroke-right"></div> </div> </div> <div class="mhn-text"> <h4>标题</h4> <p>描述信息</p> </div> </div> </div> <!--可以添加更多的mhn-item--> ...... </div> </div>
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:['<svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></svg>','<svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg>'] }); });
该基于owl-carousel的卡片水平轮播展示特效的原文地址为:https://codepen.io/khadkamhn/pen/RxVKXP
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!