How to add gap between images in carousel slider or remove glitch when slide

Question

I made a carousel with reference of this link and originally posted on this link but unfortunately, I want no padding in first image. So I removed padding of first image but that create big width of image.

So I removed padding in all images and for gap I added margin-left

.carousel-item img {
    padding: 0;
    margin-right: 1rem; /* for gap */
}

but that created some type of glitch when I slide it.

Is there a solution for adding gap between images (not in first and last image)?

Codepen Link: https://codepen.io/Nisharg/pen/qwajmx

$('#travelCarousel').carousel({
    interval: false
});

$('#travelCarousel.carousel .carousel-item').each(function(){
    let next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (let i=0;i<3;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
    }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> 
<style>
.carousel-item img {
  padding: 0;
  margin-right: 1rem; /* for gap */
}


  .carousel-inner .carousel-item.active,
  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
      display: flex;
  }

  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
      transform: translateX(33.33333333%);
  }

  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
      transform: translateX(-33.33333333%);
  }

  .carousel-inner .carousel-item-right,
  .carousel-inner .carousel-item-left {
      transform: translateX(0);

  }
</style>
<div class="travel__carousel">
 <div id="travelCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
   <div class="carousel-item active">
    <img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=0" alt="img-1">
   </div>
   <div class="carousel-item">
    <img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=2" alt="img-2">
   </div>
   <div class="carousel-item">
    <img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=3" alt="img-3">
   </div>
   <div class="carousel-item">
    <img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=4" alt="img-4">
   </div>
   <div class="carousel-item">
    <img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=5" alt="img-5">
   </div>
  </div>
 </div>
 <div class="travel__arrows">
  <a class="btn" href="#travelCarousel" role="button" data-slide="prev"><i class="fas fa-arrow-left"></i></a>
  <a class="btn" href="#travelCarousel" role="button" data-slide="next"><i class="fas fa-arrow-right"></i></a>
 </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

I don't want to use any third-party JS library like Slick.js.

I improved your snippet by adding the CSS inline with the html. The issue is the order of the styles that's why your are not having the same preview — Temani Afif, Apr 07 '19 at 20:45

Temani Afif · Answer 1 · 2019-04-07T20:50:19.047

This glitch is due to the fact that the gaps are transparent and you see the next/previous sliding item through them. One idea is to make those gap opaque.

You can for example add a white box-shadow to your image to cover the transparent gap:

.carousel-item img {
    padding: 0;
    margin-right: 1rem;
    /*added this*/
    box-shadow: 
       1rem 0 #fff,
      -1rem 0 0 #fff; 
}

$('#travelCarousel').carousel({
    interval: false
});

$('#travelCarousel.carousel .carousel-item').each(function(){
    let next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (let i=0;i<3;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
    }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> 
<style>
.carousel-item img {
  padding: 0;
  margin-right: 1rem; /* for gap */
  box-shadow:
     1rem 0 0 #fff,
    -1rem 0 0 #fff;
}


  .carousel-inner .carousel-item.active,
  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
      display: flex;
  }

  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
      transform: translateX(33.33333333%);
  }

  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
      transform: translateX(-33.33333333%);
  }

  .carousel-inner .carousel-item-right,
  .carousel-inner .carousel-item-left {
      transform: translateX(0);

  }
</style>

<div class="travel__carousel">
 <div id="travelCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
   <div class="carousel-item active">
    <img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=0" alt="img-1">
   </div>
   <div class="carousel-item">
    <img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=2" alt="img-2">
   </div>
   <div class="carousel-item">
    <img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=3" alt="img-3">
   </div>
   <div class="carousel-item">
    <img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=4" alt="img-4">
   </div>
   <div class="carousel-item">
    <img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=5" alt="img-5">
   </div>
  </div>
 </div>
 <div class="travel__arrows">
  <a class="btn" href="#travelCarousel" role="button" data-slide="prev"><i class="fas fa-arrow-left"></i></a>
  <a class="btn" href="#travelCarousel" role="button" data-slide="next"><i class="fas fa-arrow-right"></i></a>
 </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

like when u click on slide right images are glitch and see first image its gap fill after like 300ms. — Nisharg Shah, Apr 07 '19 at 21:08
@NishargShah I guess du to transition, try to set `transition-timing-function: ease-in;` to carousel item — Temani Afif, Apr 07 '19 at 21:13
bro i saw most of difficult css question solved by you and you r awesome. — Nisharg Shah, Apr 07 '19 at 21:31

score 1 · Accepted Answer · answered Apr 07 '19 at 21:16

1

I think the biggest problem with such approach is the hard-coded "33.333%" of transition that does not take the gap/margin into account. If you use calc(x% + gap) as the value for the transition, it works well.

Additionally, to accommodate all bootstrap breakpoints that change the amount of visible slides, you need to add different transition offsets (e.g. 20% offset for small screens and 50% offset for big screens). A rough example of such approach can be found in the following codepen.

answered Apr 07 '19 at 21:16

Piotr Wicijowski

1,975
9
15

Thanks bro but glitch exist when u click on slide first image gaps fill after like 300ms. – Nisharg Shah Apr 07 '19 at 21:19
What browser are you using? For me (Firefox) the issue is resolved. In addition, what width of the viewport gives you the problem (as there might be an edge case with a specific bootstrap breakpoint that my example did not cover) – Piotr Wicijowski Apr 07 '19 at 21:23
yep bro, firefox have complete view but not in chrome, please open in chrome and solve problem – Nisharg Shah Apr 07 '19 at 21:26
I updated the codepen with a bit of css that makes it behave on Chrome the way it does on Firefox - basically the images now keep the aspect ratio, and on small screens the carousel is scaled down regardless of natural image sizes. – Piotr Wicijowski Apr 07 '19 at 21:34
bro one thing more, 3rd image is cut by window why ? can you solve it, bcz in my images it clear shows images is cuts – Nisharg Shah Apr 07 '19 at 21:34
By "3rd image is cut" I understand that you are saying that on screen sizes between 768px and 1200px only two images are displaying in carousel. This is because you added classes "col-md-6 col-xl-4" to your images, which mean that each will occupy 6 (out of 12) columns on medium screens and 4 columns on extra large screens. – Piotr Wicijowski Apr 07 '19 at 21:38
no bro, above 1200 px 3rd image is cut by window, i know about media queries and other stuff that done by you but that problem is different – Nisharg Shah Apr 07 '19 at 21:41
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/191413/discussion-between-nisharg-shah-and-piotr-wicijowski). – Nisharg Shah Apr 07 '19 at 21:42

How to add gap between images in carousel slider or remove glitch when slide

2 Answers2

Linked