Я пробую простой слайдер в карусели совы, но между изображениями есть пространство. Как убрать пробел между изображениями в 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
});
а также иногда ищите соотношение изображений, что также создает проблемы
вот моя ручка https://codepen.io/nick4434/pen/ZNMawQ
Я добавил свою часть css
установить stagepadding на 0 также
все еще не работает, я изменил поля и заполнение сцены
я дал проверку пера мой пример
рад помочь :)
Нам было бы полезно, если бы вы создали скрипку. В любом случае ...
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
autoWidth:false,
items:3,
loop:true,
margin:0,
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
}
}
})
});
Попробуйте это решение.
Вы дали какие-либо отступы или проверку полей, потому что это карусельный метод для удаления пробела, если он все еще не работает, плохо проверьте его