基于owl-carousel的卡片水平轮播展示特效
这是一款基于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插件。
