插件介绍
这是一款基于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/600×400/?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
阅读全文
常见问题
下载地址失效了怎么版？
客服会第一时间检查下载地址，并发送到您的注册邮箱。如未及时处理可联系客服QQ或邮箱。
导入演示被中断了想重新导入怎么办？
https://themege.net/23822.html
不懂导入演示数据？无法一键导入演示数据？
https://themege.net/16186.html
原文链接：https://themege.net/2275.html，转载请注明出处。
评论0