Owl Carousel使用代码
时间:2023年11月28日
/来源:网络
/编辑:佚名
功能说明
Owl Carousel自动适应页面宽度,在手机端显示的是每次1个图标,在PC端显示每次6个图标。自动从右边向左边滚动。

HTML代码
<div class="owl-carousel owl-theme owl-loaded owl-drag" id="brand">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item active">
<a href="#"><img src="theme/img/smc.png" alt="smc" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/hdjt.png" alt="和达交投" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/dams.png" alt="大安模塑" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/saint.png" alt="saint" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/ddyy.png" alt="大地影院" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/gjjj.png" alt="顾家家居" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/bayer.png" alt="BAYER药业" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/marykay.png" alt="mary kay" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/xxf.png" alt="相贤府" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/ljgj.png" alt="丽郡国际" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/gjjj.png" alt="宋都" /></a>
</div>
</div>
</div>
</div>
JS调用代码
<script>
$(document).ready(function() {
$('#brand').owlCarousel({
items: 4,
itemsMobile: [479,1],
loop: true,
margin: 0,
callbacks: true,
dots:true,
nav:true,
mouseDrag:true,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true,
responsiveClass:true,responsive:{0:{items:1,margin:0},768:{items:4},1200:{items:6}}
});
})
</script>
Owl Carousel自动适应页面宽度,在手机端显示的是每次1个图标,在PC端显示每次6个图标。自动从右边向左边滚动。

HTML代码
<div class="owl-carousel owl-theme owl-loaded owl-drag" id="brand">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item active">
<a href="#"><img src="theme/img/smc.png" alt="smc" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/hdjt.png" alt="和达交投" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/dams.png" alt="大安模塑" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/saint.png" alt="saint" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/ddyy.png" alt="大地影院" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/gjjj.png" alt="顾家家居" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/bayer.png" alt="BAYER药业" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/marykay.png" alt="mary kay" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/xxf.png" alt="相贤府" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/ljgj.png" alt="丽郡国际" /></a>
</div>
<div class="owl-item">
<a href="#"><img src="theme/img/gjjj.png" alt="宋都" /></a>
</div>
</div>
</div>
</div>
JS调用代码
<script>
$(document).ready(function() {
$('#brand').owlCarousel({
items: 4,
itemsMobile: [479,1],
loop: true,
margin: 0,
callbacks: true,
dots:true,
nav:true,
mouseDrag:true,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true,
responsiveClass:true,responsive:{0:{items:1,margin:0},768:{items:4},1200:{items:6}}
});
})
</script>
新闻资讯 更多
- 【建站知识】查询nginx日志状态码大于400的请求并打印整行04-03
- 【建站知识】Python中的logger和handler到底是个什么?04-03
- 【建站知识】python3拉勾网爬虫之(您操作太频繁,请稍后访问)04-03
- 【建站知识】xpath 获取meta里的keywords及description的方法04-03
- 【建站知识】python向上取整以50为界04-03
- 【建站知识】scrapy xpath遇见乱码解决04-03
- 【建站知识】scrapy爬取后中文乱码,解决word转为html 时cp1252编码问题04-03
- 【建站知识】scrapy采集—爬取中文乱码,gb2312转为utf-804-03