1. 主题阁汉化首页
  2. 特效代码

基于owl-carousel的水平卡片轮播展示特效

基于owl-carousel的卡片水平轮播展示特效

插件介绍

这是一款基于owl-carousel的卡片水平轮播展示特效。该卡片轮播展示特效可以通过前后导航按钮来切换卡片,它是响应式设计,在手机等小屏幕设备上,会自动调节为只展示一个卡片。

使用方法

在页面中引入bootstrap.css和style.css文件,以及jquery和owl.carousel.min.css和owl.carousel.min.js文件。

  1. <link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css”>
  2. <link rel=“stylesheet” type=“text/css” href=“css/owl.carousel.min.css”>
  3. <link rel=“stylesheet” type=“text/css” href=“css/style.css”>
  4. <script type=“text/javascript” src=“js/jquery.min.js”></script>
  5. <script type=“text/javascript” src=“js/owl.carousel.min.js”></script>
 HTML结构

该卡片水平轮播展示特效的基本的使用方法如下:

  1. <div class=“container”>
  2.   <div class=“mhn-slide owl-carousel”>
  3.     <div class=“mhn-item”>
  4.       <div class=“mhn-inner”>
  5.         <img src=“https://source.unsplash.com/600×400/?paper”>
  6.         <div class=“mhn-img”>
  7.           <div class=“loader-circle”>
  8.             <div class=“loader-stroke-left”></div>
  9.             <div class=“loader-stroke-right”></div>
  10.           </div>
  11.         </div>
  12.         <div class=“mhn-text”>
  13.           <h4>标题</h4>
  14.           <p>描述信息</p>
  15.         </div>
  16.       </div>
  17.     </div>
  18.     <!–可以添加更多的mhn-item–>
  19.     ……
  20.   </div>
  21. </div>
Javascript

在页面DOM元素加载完毕之后,通过下面的方法来初始化owl-carousel插件。

  1. $(function(){
  2.   $(‘.mhn-slide’).owlCarousel({
  3.     nav:true,
  4.     //loop:true,
  5.     slideBy:’page’,
  6.     rewind:false,
  7.     responsive:{
  8.       0:{items:1},
  9.       480:{items:2},
  10.       600:{items:3},
  11.       1000:{items:4}
  12.     },
  13.     smartSpeed:70,
  14.     onInitialized:function(e){
  15.       $(e.target).find(‘img’).each(function(){
  16.         if(this.complete){
  17.           $(this).closest(‘.mhn-inner’).find(‘.loader-circle’).hide();
  18.           $(this).closest(‘.mhn-inner’).find(‘.mhn-img’).css(‘background-image’,’url(‘+$(e.target).attr(‘src’)+’)’);
  19.         }else{
  20.           $(this).bind(‘load’,function(e){
  21.             $(e.target).closest(‘.mhn-inner’).find(‘.loader-circle’).hide();
  22.             $(e.target).closest(‘.mhn-inner’).find(‘.mhn-img’).css(‘background-image’,’url(‘+$(e.target).attr(‘src’)+’)’);
  23.           });
  24.         }
  25.       });
  26.     },
  27.     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>’]
  28.   });
  29. });

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

 

下载地址

恭喜,此资源为免费资源,请先
如需代安装搭建,请联系QQ:331752841
链接失效请联系客服补新链接地址
本站所有主题模板都是第一时间更新的,而且都是免费包更新!
加入VIP会员主题插件免费下载,专享优质服务!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,如若转载,请注明出处:https://themege.net/2275.html。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

发表评论

登录后才能评论
联系我们

联系我们

在线咨询:点击这里给我发消息

邮件:themege@163.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部