glide Slides getting cut off in carousel

I have done a simple implementation of the carousel and did some simple CSS changes for demo purposes. I noticed that the last slide in the carousel is being cut off from the carousel container.

The result can be seen in this image. Notice the last slide in the carousel, some portion is cut off and the margin is missing. I tried several combinations of values but got the same result. Please help me figure out if I'm missing anything.

Screenshot 2020-07-06 at 2 24 40 PM

Here's my JS code


    document.addEventListener('DOMContentLoaded', function (event) {
      var glide = new Glide('#intro', {
        type: 'carousel',
        gap: 16,
        perView: 3,
        focusAt: 'center'
      })
      glide.mount()
    })

CSS (In addition to Glide core)

.slider__frame {
      border-radius: .16667em;
      text-align: center;
      height: 150px;
      line-height: 150px;
      /*box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.15);*/
      color: #000;
      background: #ccc;
      font-size: 1em;
      font-weight: 900;
      width: 181.25px; 
      margin-left: 5px; 
      margin-right: 5px;
    }

    .slider__frame[class*=active] {
      -webkit-box-shadow: none;
      box-shadow: none;
      background: linear-gradient(-45deg,#ed145b,#7b31f4);
    }

    .glide__arrow {
      cursor: pointer;
      padding: 0;
      border: 0;
      outline: 0;
    }

    .slider__arrow {
      position: absolute;
      top: 50%;
      z-index: 1;
      width: 30px;
      height: 30px;
      margin-top: -14px;
      border-radius: 50%;
      background-color: #d8dadc;
      -webkit-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
      -webkit-box-shadow: 0 0.5rem 4rem 0 rgba(0,0,0,.5);
      box-shadow: 0 0.5rem 4rem 0 rgba(0,0,0,.5);
    }

    .slider__arrow--next {
      right: 0;
    }
    .slider__arrow--prev {
      left: 0;
    }

HTML

<body>
  <div class="re-engage-container">
    <div id="intro" class="slider glide glide--ltr glide--carousel glide--swipeable">
      <div class="slider__track glide__track" data-glide-el="track">
        <ul class="slider__slides glide__slides">

          <li class="slider__frame glide__slide">1</li>

          <li class="slider__frame glide__slide">2</li>

          <li class="slider__frame glide__slide">3</li>

          <li class="slider__frame glide__slide">4</li>

          <li class="slider__frame glide__slide">5</li>

        </ul>
      </div>

      <div data-glide-el="controls">
        <button class="slider__arrow slider__arrow--prev glide__arrow glide__arrow--prev" data-glide-dir="<">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
            <path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
          </svg>
        </button>

        <button class="slider__arrow slider__arrow--next glide__arrow glide__arrow--next" data-glide-dir=">">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
            <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</body>

Jul 06 '20 09:07 vikasr111

Hy, find some solution? because and me i have same problem.

Sep 08 '20 20:09 ezramod

Hey, I had the same problem and solved it by adding those css properties to the container.

#intro {
        margin: auto;
        width: calc(100vw - 40px);
}

I think applying a fix width solve this issue

Feb 16 '21 13:02 befuhro

I ran into this bug as well & was able to resolve it by removing the browser's default right margin from the ul.slider__slides element.

Ex:

.slider__slides {
  margin-right: 0;
}

May 10 '21 15:05 jchck