<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、引入文件
|
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
>
|
2、HTML
|
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
>
|
3、JavaScript
|
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
