Part of next slide on right side.

[jeffersonest]

The right side of slide is showing a part of next slide.

let Banner = new Siema({
  selector: '.siema',
  duration: 200,
  easing: 'ease-out',
  perPage: 1,
  startIndex: 0,
  draggable: true,
  multipleDrag: true,
  threshold: 20,
  loop: false,
  rtl: false,
  onInit: () => {},
  onChange: () => {},
});

document.querySelector('.prev').addEventListener('click', () => Banner.prev());
document.querySelector('.next').addEventListener('click', () => Banner.next());

    <section class="container-fluid">
            <div class="siema">
                <div class="banner1"></div>
                <div class="banner2"></div>
                <div class="banner3"></div>
                <div class="banner4"></div>
                <div class="banner5"></div>
            </div>
            <button class="prev">prev</button>
            <button class="next">next</button>
    </section>

    .container-fluid { 
       padding: 0; 
    }
    .banner1{
        background: url('https://dummyimage.com/1920x500/E09F7D/fff.png') no-repeat center center;
        height: 500px;
    }
    .banner2{
        background: url('https://dummyimage.com/1920x500/EF5D60/fff.png') no-repeat center center;
        height: 500px;
    }
    .banner3{
        background: url('https://dummyimage.com/1920x500/EC4067/fff.png') no-repeat center center;
        height: 500px;
    }
    .banner4{
        background: url('https://dummyimage.com/1920x500/A01A7D/fff.png') no-repeat center center;
        height: 500px;
    }
    .banner5{
        background: url('https://dummyimage.com/1920x500/311847/fff.png') no-repeat center center;
        height: 500px;
    }

Image: https://www.dropbox.com/s/1ny6vpc6mvzkx19/siema03.png?dl=0

[pawelgrzybek]

CodePen link please...

[SteppeEagle]

One suggestion.
I have this issue as well. But I noticed that container width have different size on load and DOMContentLoaded events.
@jeffersonest , if it is in the case (you need to check it) you can apply carousel on load event instead of DOMContentLoaded. It helped me, but I am not sure that is right solution.
Might be the mark up and styles should be changes for creating appropriate width container on DOMContentLoaded.

[kieron]

I am also experiencing this. Just checking but I believe for me it was loop causing it.

[vndre]

Hello, for anyone experiencing this I noticed Siema sets the slider width based on the initial selector width so I fixed my issue with:

.selector {
   min-width: 100vw;
}

And now my slides fit the whole viewport :)

[reza-akbari]

Same Issue

Reproduction link: (with a temporary workaround)
https://codepen.io/reza-akbari/pen/ZEbrOqB