HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<title>i-FrameWork - Owl-carousel</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.i-framework.com/assets/css/plug-in-v4.css">
<link rel="stylesheet" href="https://www.i-framework.com/assets/css/common.css">
<link rel="stylesheet" href="https://www.i-framework.com/assets/css/base.css">
</head>
<body>
<div class="container">
<main class="page-middle mb-5" role="main">
<div class="content" id="item-01">
<h1 class="title font-r150 bold">
<span class="inline-block">Owl-Carousel</span>
</h1>
<p class="font-grey font-light">
对此轮播插件的控制按钮增加了颜色主题。
</p>
</div>
<div class="content" id="item-02">
<p class="title font-r125 bold">
<span class="inline-block">How?</span>
</p>
<p class="font-grey font-light">
追加颜色名称：
</p>
<figure class="p-3 bg-blue0">
<pre class="mb-0">class="owl-carousel owl-theme owl-example <span class="underline">red</span>"</pre>
<pre class="mb-0">class="owl-carousel owl-theme owl-example <span class="underline">blue</span>"</pre>
</figure>
</div>
<div class="content" id="item-03">
<p class="title font-r125 bold">
<span class="inline-block">Code</span>
</p>
<p class="font-grey font-light">
关于插件的具体用法，请参考此插件<a class="italic underline" href="http://owlcarousel2.github.io/OwlCarousel2/" target="_blank">官方网站</a>介绍。
</p>
<p class="title mb-2 font-r0875 bold">
<span class="inline-block italic">example:</span>
</p>
<figure class="p-3 bg-blue0">
<div class="owl-carousel owl-theme owl-example red">
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
</div>
</figure>
<figure class="p-3 bg-blue0">
<div class="owl-carousel owl-theme owl-example blue">
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
</div>
</figure>
<p class="title mb-2 font-r0875 bold">
<span class="inline-block italic">code:</span>
</p>
<textarea class="form-control bg-blue0" cols="30" rows="20">
<div class="owl-carousel owl-theme owl-example red">
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
<div class="item">
<img src="http://placehold.it/500" alt="">
</div>
</div></textarea>
</div>
</main>
</div>
<!--main e-->
<script src="https://www.i-framework.com/assets/js/jQuery-v3.4.1.min.js"></script>
<script src="https://www.i-framework.com/assets/frame/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://www.i-framework.com/assets/plug-in/owlcarousel2/dist/owl.carousel.min.js"></script>
<script src="https://www.i-framework.com/assets/plug-in/scrollup/dist/jquery.scrollUp.min.js"></script>
</body>
</html>
JAVASCRIPT
$('.owl-example').owlCarousel({
loop: true,
margin: 30,
autoplay: true,
autoplayTimeout: 50000,
responsiveClass: true,
responsive: {
0: {
items: 2,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: true
}
}
})
