Carousel with 2 items shows only

[swiftanthony]

Materialize css version: 1.0.0

JS:

$('.carousel').carousel({
    dist: 0,
    shift: 5,
    numVisible: 5,
    indicators: true,
    noWrap: false,
    fullWidth: false,
    duration: 200,
});

HTML:

<div class="carousel">
    <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
    <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
</div>

When there are 2 items in carousel only one is visible. This is due to incorrect calculation of opacity.

Codepen for version 1.0.0 showing the issue: https://codepen.io/swiftanthony/pen/pogqEYo Codepen for version 0.100.2 where same code works correctly: https://codepen.io/swiftanthony/pen/KKVbgJP

[swiftanthony]

It seems this commit is a culprit: https://github.com/Dogfalo/materialize/commit/cbb45236deb7b47fdcf31a6a739cc1daf058f2b8#diff-ded54852f17bdc9eaad04d7492954385

[Durkee]

Why are bugs not getting fixed (feel the 32k stars)? Is there a workaround for this issue?

[Smankusors]

if someone can fix this, the PR would be welcome at https://github.com/materializecss/materialize 😉