I am creating a slider with Glide.js as a WordPress Gutenberg Block. Everything works fine when I use the 'slider Option. However, when I use the 'carousel' options it breaks. It shows more then the configured slides per view. When I inspect the slides I see that the correct width in the width attribute is written in the html, but it is rendered smaller. The reason I found for this is, that the length of the "glide__track" container is too small.
There seem to be 15 elements in the container, but I only have 3 slides, meaning each slide has 4 clones, that doesn't seem to make much sense, too.
JS Code: `
import Glide from '@glidejs/glide'
const allTestiSlideshows = document.querySelectorAll(".wp-block-egnblocks-pwkfrontslider .slider")
allTestiSlideshows.forEach(function (currentSlideshow) {
var glide = new Glide(currentSlideshow, {
type: "carousel",
perView: 1,
peek: 0
})
glide.mount()
} )
`
PHP Render Code: `
<div class="wp-block-egnblocks-pwkfrontslider full-width">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="slider">
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li className="glide__slide">
<?php
echo wp_get_attachment_image( $attributes['id1'], 'frontslider', false, [ "class" => "pwk-slider-img"] )
?>
</li>
<li className="glide__slide">
<?php
echo wp_get_attachment_image( $attributes['id2'], 'frontslider', false, [ "class" => "pwk-slider-img"] )
?>
</li>
<li className="glide__slide">
<?php
echo wp_get_attachment_image( $attributes['id3'], 'frontslider', false, [ "class" => "pwk-slider-img"] )
?>
</li>
</ul>
</div>
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
<button class="glide__bullet" data-glide-dir="=2"></button>
</div>
</div>
</div>
</div><!--col-->
<div class="col-lg-4">
<div class="front-text">
<?php echo $content; ?>
</div>
</div><!--col-->
</div>
</div>
</div>
`
Has anyone experienced the sam issue?
When I use the slider option no clones are created (of course not necessary here) and everything works fine.