html - owl carousel 2中图像之间的空白
问题描述
我正在尝试猫头鹰轮播中的简单滑块,但图像之间有空间。如何删除owl-carousel 2中图像之间的空间?我试图增加项目,但它删除了箭头按钮。在移动视图中,两个图像之间的空间更大。请帮忙。谢谢
main.js
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
autoWidth:false,
items:3,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true,
dots: false,
stagePadding:40,
nav:true,
navText: ['<i class="fas fa-chevron-left" aria-hidden="true"></i>','<i class="fas fa-chevron-right" aria-hidden="true"></i>'],
responsive:{
0:{
items:2
},
600:{
items:2
},
1000:{
items:5
}
}
})
});
样式.css
.owl-carousel .item img{
height:120px;
width:120px;
}
.owl-item .active{
height:120px;
width:120px;
}
.owl-carousel .item{
text-align: center;
}
/* owl nav */
.owl-prev i, .owl-next i {
color: #000000;
}
.owl-prev, .owl-next {
position:absolute;
top: 0;
height:30%;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 30px;
background: #869791;
}
.owl-prev {
left:0;
top: 42px;
}
.owl-next {
right:0;
top: 42px;
}
/* removing blue outline from buttons */
.owl-next:focus, .owl-prev:focus
{
outline: none;
}
.caroussel-theme{
background-color: aquamarine
}
.container-fluid {
max-width: 1230px;
}
.text-content{
color:#000000;
font-size:16px;
font-family: 'Georgia, 'Times New Roman', Times, serif';
}
div.owl-item > div {
display:table-cell;
vertical-align:middle;
}
.owl-stage{
width:150px;
}
解决方案
只需将边距设置为 0 即可!
$('.owl-carousel').owlCarousel({
stagePadding: 0,
items: 1,
loop:true,
margin:0,
singleItem:true,
nav:true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
dots:true
});
并且有时也会寻找图像的比例,这也会产生问题
推荐阅读
- android - 华为 Map Kit 崩溃:MapsCore 未初始化
- css - 随机图像幻灯片,图像过渡淡入/淡出?
- swiftui - LocationManager 坐标在 Watch 应用上出现时不可用
- function - Flutter - 使用动态函数来控制 UI
- heroku - 将 Flask 应用程序部署到 Heroku 时出现奇怪的“is_xhr”错误
- google-sheets - 在日期数组中搜索最低/最高值
- python - 类型对象“SGP30”没有属性“关闭”
- android - Android Studio - 从 EditText 视图获取输入
- python - 如何将合并的数据从单元格中提取到 python 数据框中的行中?
- javascript - Rails & AJAX,是否有理由不直接在控制器操作中呈现 html 视图以供 ajax 处理?