My first slide is offset on page loadup. When scrolling in the non-default direction (in this case, down) all of the focused slides are offset. Scrolling in the default direction works fine.
Problem seems to be tied to changing the scale. Possibly the calculation of slide position? Changing the value of scale also changes the size of the offset. Setting this to 1 "solves" the problem.
article {
height: 100px;
width: 100px;
}
.splide {
height: 100px;
}
.splide__slide {
transition: transform 0.1s, opacity 0.3s;
opacity: 0.5s;
transform: scale(0.7);
}
.splide__slide.is-active {
opacity: 1;
transform: scale(1);
z-index: 2;
}
<main style="height: 100px; display: flex; justify-content: center;">
<section class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><article style="background-color: red;"></article></li>
<li class="splide__slide"><article style="background-color: green;"></article></li>
<li class="splide__slide"><article style="background-color: blue;"></article></li>
</ul>
</div>
</section>
</main>
<script>
new Splide( '.splide', {
direction: 'ttb',
wheel: true,
height: '100px',
type: 'loop',
}).mount();
</script>