пустое пространство между изображениями в сове карусели 2 - PullRequest
Новая
       25

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

1 голос
/ 29 мая 2019

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

Изображение: изображение, которое показывает пространство между двумя изображениями enter image description here

Ответы [ 2 ]

1 голос
/ 29 мая 2019

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

0 голосов
/ 29 мая 2019

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

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

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

...