分享程序员开发的那些事...
更新时间：2022-08-13 13:23:11
<div class="tab_container">
<div class="tab_content_category_tabs_3">
<div class="row">
<div class="col-xs-12 col-md-12 xs-offset-0">
<div id="owl-demo" class="owl-carousel ">
<c:if test="${not empty banners_c.advertisement}">
<c:forEach items="${banners_c.advertisement}" var="banners_c">
<div class="item">
<a href="${banners_c.hrefUrl}" title="Read more">
<img src="${imageHost}${banners_c.imageUrl}" alt="Owl Image">
</a>
</div>
</c:forEach>
</c:if>
</div>
</div>
</div>
</div>
</div>
<content tag="myJavascript">
<script type="text/javascript">
jQuery().ready(function () {
$("#owl-demo").owlCarousel({
autoPlay: false,
items: 3,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [980, 3],
itemsTablet: [768, 2],
itemsMobile: [480, 1],
slideSpeed: 1000,
paginationSpeed: 1000,
rewindSpeed: 1000,
navigationText: ["", ""],
navigation: true,
stopOnHover: true,
pagination: true
});
});
</script>
</content>
|
1
2
3
4
|
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>
|
|
1
2
3
4
5
6
7
8
9
10
|
<div id="owl-demo" class="owl-carousel">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
|
|
1
2
3
|
$(function(){
$('#owl-example').owlCarousel();
}); |
格式就是div 里面 嵌套一个div
参考
http://www.dowebok.com/93.html#comments
本文转自wiwi博客51CTO博客，原文链接http://blog.51cto.com/wiwili/1969627如需转载请自行联系原作者
wiwili