Пробел между изображениями в карусели совы 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;
}

Изображение: изображение, которое показывает пространство между двумя изображениями Пробел между изображениями в карусели совы 2

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
3 055
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Просто установите маржу на 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

Вы дали какие-либо отступы или проверку полей, потому что это карусельный метод для удаления пробела, если он все еще не работает, плохо проверьте его

NickCoder 29.05.2019 10:55

Я добавил свою часть css

Krishnapriya Prasannan 29.05.2019 11:22

установить stagepadding на 0 также

NickCoder 29.05.2019 11:28

все еще не работает, я изменил поля и заполнение сцены

Krishnapriya Prasannan 29.05.2019 11:32

я дал проверку пера мой пример

NickCoder 29.05.2019 11:39

рад помочь :)

NickCoder 29.05.2019 12:24

Нам было бы полезно, если бы вы создали скрипку. В любом случае ...

$(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
            }
        }
    })
  });

Попробуйте это решение.

Другие вопросы по теме