Sizes.width uses root width

Sizes sets the width as Components.Html.root.offsetWidth, is that right or should it be using Components.Html.track.offsetWidth? Sizes.width is used to calculate Sizes.slideWidth, in my case my track isn’t the same width as the root container, so it’s messing up the slide widths.

By the way, awesome work, the components have made it really easy to extend and fit my use case 🎉

[boboldehampsink]

This seems to be working!

[dogooddesignco]

I was running into this issue also and thanks to the suggestion of manually triggering go() I was able to fix it. My code is below. Note that I needed support for multiple glides on a given page, so I iterated through every glide. I then used a somewhat hackish parentnode.parentnode.parentnode to select the correct parent of the glide which has an ID. This works in my case because all these glides will have the same DOM structure, but you will probably want a different way to uniquely refer to the individual glide, so that you can ensure that the bullets are controlling the correct glide.

const glides = document.querySelectorAll( '.glide' );

glides.forEach( glide => {
	const parentId = glide.parentNode.parentNode.parentNode.id;
	const thisGlide = new Glide( '#' + parentId + ' .glide' ).mount();
	const bullets = document.querySelectorAll( '[data-glide-parent="' + parentId + '"] .glide__bullet' );

	bullets.forEach( bullet => {
		bullet.addEventListener( 'click', e => {
			const slide = bullet.getAttribute( 'data-glide-dir' );
			thisGlide.go( slide );
		} );
	} );
} );

markup:

<div id="tabbed-images-block_5f737aa0e3fe8" class="tabbed-images wp-block-acf-dogooddesign-tabbed-images">
    
    <div class="wp-block-columns">

        <div class="wp-block-column" style="flex-basis:60%">

            <div class="glide glide--ltr glide--slider glide--swipeable">

                <div class="glide__track" data-glide-el="track">

                    <ul class="glide__slides">
                        
                        <li class="tabbed-images__image-wrap glide__slide glide__slide--active">
                            Slide content.
                        </li>
                        
                        <li class="tabbed-images__image-wrap glide__slide">
                            Slide content.
                        </li>

                    </ul>

                </div>

            </div>

        </div>

        <div class="wp-block-column" style="flex-basis:40%">

            <div class="glide__bullets" data-glide-parent="tabbed-images-block_5f737aa0e3fe8">

                <div class="tabbed-images__tab-control glide__bullet" data-glide-dir="=0">
                    Bullet
                </div>

                <div class="tabbed-images__tab-control glide__bullet" data-glide-dir="=1">
                    Bullet
                </div>

            </div>

        </div>
    </div>
</div>