Я пробую простой слайдер в сове, но между изображениями есть место. Как убрать пробел между изображениями в сове-карусели 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
            }
        }
    })
  });

Style.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;
}

Образ: изображение, которое показывает пространство между двумя изображениями введите описание изображения здесь

1
Krishnapriya Prasannan 29 Май 2019 в 10:48

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

1
NickCoder 29 Май 2019 в 09:38

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

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

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

0
Kevin 29 Май 2019 в 08:26