Splidejs / splide

Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
https://splidejs.com
MIT License
4.83k stars 418 forks source link

Wrong width of next slide when using padding and gap #1255

Open lukaszahorec opened 9 months ago

lukaszahorec commented 9 months ago

Checks

Version

4.1.3

Description

Hi,

After initial load of slider with using padding and gap, the "next slide" has wrong width respectively the width seems good but its pushed more to the right side and overflowing the container.

If I hit next/prev slide or use method refresh() (or autoplay is true) than it's corrected.

let splide = new Splide( '.splide', { type : 'loop', padding: '181px', perPage: 1, gap: '24px', updateOnMove: true, drag: false, autoplay: false, interval: 5000, });

Reproduction Link

https://codepen.io/luk-z-horec/pen/oNJpdWN

Steps to Reproduce

  1. Use padding
  2. Use gap
  3. Autoplay: false
  4. type: loop

Expected Behaviour

The prev and next slide should have the same visible width.