javascript - Owl-carousel 每个项目显示很多 3 个图像 - Laravel
问题描述
我刚开始使用 owl-carousel,我想每个项目显示 3 张图像,所以我想确保 laravel 会在幻灯片中显示的每 3 张 img 创建一个项目(“.item”)
这是我的 Javascript 代码
$('.owl-carousel').owlCarousel({
loop:false, // loop over the items
margin:0,
items: 6,
itemsDesktop: [1400, 6],
itemsDesktopSmall: [1100, 4],
itemsTablet: [700, 3],
itemsMobile: [500, 2],
nav:false, // Display the arrow nav of the carousel
dots:false, // Display the dot of the carousel
responsive:{
0:{ // The width of the screen from 0px to 599px
items:2 // How many items you want to display
},
600:{ // The width of the screen from 600px to 999 px
items:3 // How many items you want to display
},
1000:{ // The width of the screen from 1000 px
items:4 // How many items you want to display
}
}
})
这是我的刀片
<div class="owl-carousel owl-theme" style="margin-left: 20px">
<div class="item col-md-12">
@foreach ($AsignItems as $ItemOwned)
<div class="lms-cours-item-list">
<img class="img-fluid list-item-img" src="{{ $ItemOwned->image }}" alt="{{ $ItemOwned->log }}" />
</div>
@endforeach
</div>
<div class="item">
@foreach ($Diff as $ItemUnowned)
<div class="lms-cours-badgs-list unowned-item">
<img class="img-fluid list-item-img" src="{{ $ItemUnowned->image }}" alt="{{ $ItemUnowned->alt}}" />
</div>
@endforeach
</div>
</div>
你能告诉我我应该怎么做才能让每件物品有 3 个元素?还有其他选择吗?
解决方案
您可以控制从您的 js 代码中显示多少项目:
$('.owl-carousel').owlCarousel({
loop:false, // loop over the items
margin:0,
items: 3,
itemsDesktop: [1400, 3],
itemsDesktopSmall: [1100, 3],
itemsTablet: [700, 3],
itemsMobile: [500, 2],
nav:false, // Display the arrow nav of the carousel
dots:false, // Display the dot of the carousel
responsive:{
0:{ // The width of the screen from 0px to 599px
items:2 // How many items you want to display
},
600:{ // The width of the screen from 600px to 999 px
items:3 // How many items you want to display
},
1000:{ // The width of the screen from 1000 px
items:3 // How many items you want to display
}
}
})
我认为这对你有用。如果你想自动滚动项目添加这个
autoplay:true,
推荐阅读
- apache-spark - 在 pyspark 中的 DataFrame 上使用 toPandas() 时出现神秘的“pyarrow.lib.ArrowInvalid:浮点值被截断”错误
- javascript - 从 RiotJS 中的异步更新事件刷新模板
- javascript - Google gtag_report_conversion:如何在不重新加载页面的情况下使用它?
- ember.js - Rails API - 如何启用 ActiveStorage::DirectUploadsController
- javascript - 谷歌标签管理器最接近文本
- python - TypeError:“float32”类型的对象不是 JSON 可序列化的
- apache - .htaccess mod rewrite 不做重定向
- java - 通过切割(不破坏纵横比)在Java中生成方形缩略图?
- node.js - 从 Firebase/Google Cloud Storage 作为 Node.js 函数中的缓冲区读取
- jquery - 如何在jquery中获取变量id的值?