0

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.

Eingenetzt
  • 71
  • 1
  • 6

0 Answers0