1

I am trying simple slider in owl carousel but there's space between images. How to remove space between images in owl- carousel 2? I tried to increase items but it removes the arrow button. In mobile view, space is even more between two images. Please help. Thank you

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

Image: image that shows space between two images enter image description here

Krishnapriya Prasannan
  • 15
  • 1
  • 6

3 Answers3

2

Just set the margin to 0 and done!

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

and also look for the ratio of the images sometimes that also makes issues

here is my pen https://codepen.io/nick4434/pen/ZNMawQ

NickCoder
  • 1,504
  • 2
  • 23
  • 35
0

It would be helpful to us, if you create a fiddle. Anyways ...

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

Try this solution.

Kevin
  • 1,241
  • 7
  • 20
0

Here is my code to remove extra space in ngx-owl-carousel-o

My code In .html

 <owl-carousel-o class="" [options]="customOptions" #owlCar>
    <ng-container *ngFor="let slide of slides;index as i">
        <ng-template carouselSlide id="slide.id">
            <div class="slider">
                <img (click)="getid(slide?.id,item)"
                    [src]="slide?.image?slide?.image:'assets/inf.png'" [height]="180" [width]="100"
                    [alt]="slide?.alt" [title]="slide?.videoName">
            </div>
        </ng-template>
    </ng-container>
</owl-carousel-o>

My code in css file

:host>>>.owl-carousel .owl-item img {
display: block;
width: auto !important;
}

:host>>>.owl-carousel .owl-item {
width: auto !important;
}
Kishor
  • 53
  • 4