glide__slides container width and translate3d values much too large

[codemints]

I am working if Vue3 using the composition API and the <script setup> tag. I create the HTML structure for the slides and add the content. In the <script setup> portion of the component, I import the Glide library like so, import Glide from '@glidejs/glide', then use the onMounted lifecycle hook to instantiate a new slider like so, onMounted(() => { new Glide('.glide').mount() }).

The issue is that as soon as I mount the slider, the width of the '.glide__slides' elmeent is set to an inline value of 9858px, which pushes everythign WAY outside of the viewport. I don't know how to fix this. Can somebody help?

Below is a simplified version of the code in my component. I have also attached screenshots of the dev tools for the element and inline styles, as well as screen shots of the website. Thank you!

<template>
  <div class="glide">
    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        <li class="glide__slide">
          <h2>slide 1</h2>
        </li>
        <li class="glide__slide">
          <h2>slide 2</h2>
        </li>
        <li class="glide__slide">
          <h2>slide 3</h2>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import Glide from '@glidejs/glide'

onMounted(() => {
  new Glide('.glide', {
    type: 'slider',
    bound: true,
  }).mount()
})
</script>

<style lang="scss" scoped>
</style>

[metinjakupi]

I have the same problem with NextJS

[Noctane]

Hi, I had the same issue.
I had a div wrapping my slider with a align-self: center; CSS rule that broke the '.glide__slides' element width calculation.
It might not be that exact same rule but you should look into your CSS to find any rule that can cause this problem.

Hope that helps,
Cheers

[DeskCat]

Hi, I am having the same issue.
I did see the last comment regarding removing alignment properties but that did not seem to work.
The so far the only solution I have found is to manually overwrite those values but then I have to give up the autoplay and is not a future proof solution.

Has anyone else figured out the root cause of this issue?

[DeskCat]

Found a neat solution: https://stackoverflow.com/questions/77563446/glidejs-renders-slides-too-far-off-screen/77565456#77565456

you just need to add align-self: normal to the class you are using to mount glide. It then works perfectly fine regardless of any other alignment.

I hope this helps.

[pljspahn]

Not sure if I was having the same problem, it seems like it, but I had an erroneous display: grid; set on body (I don't know why, I think I mistakenly left it from a previous layout) and removed that and the glide width is now as expected.