GlideJS Renders slides too far off screen

Question

Long story short, Adding a carousel to a wordpress site. I'm using glideJS for this and I am encountering an issue where the width and transform values are ridiculously large and the slides are rendering off-screen.

Additional Context: I am using the wordpress wp-scripts to build js and scss packages. The build is compiling correctly and it is registered correctly because I am also using glideJS slides elsewhere.

Here are screenshots and code:

snippet from my front-page.php, This is the carousel in question:

Here is the scss being used:

.featured-img{
  width: 350px;
  height: 400px;
}

.featured-slider {
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // flex-direction: row;
  margin-bottom: 400px; //remove later
    position: relative;
    overflow: hidden;
    
    div {
      outline: none;
    }
    
    & > .glide__track > .glide__slides{
      // display: flex;
      // justify-content: center;
      // align-items: center;
      // flex-direction: row;
      // gap:0.5rem;
    }
    &__interior {
      z-index: 0;
      
      // padding-top: 60px;
      // padding-bottom: 60px;

      // display: flex;
      // justify-content: center;
      // align-items: flex-end;
  
      @include atMedium {
        // padding-top: 130px;
        // padding-bottom: 50px;
      }

      & > .card-window{
        background-color: plum;
        height: 400px;  
        width: 400px;
      }
    }
  
    &__slide {
     

      width: 400px;
      height: 400px;

    }
  
    &__overlay {
      // text-align: center;
      margin: 0 auto;
      // background-color: rgba(0, 0, 0, 0.68);
      // padding: 40px;
      color: #fff;
      @include atMedium {
        width: 50%;
      }
    }
  }

The js code to mount glideJS: (HeartBullet is just a heart shaped icon for the carousel bullets)

import Glide from "@glidejs/glide";
import HeartBullet from "../../assets/images/heart-bullet.png";

class FeaturedCarousel {
  constructor() {
    if (document.querySelector(".featured-slider")) {
      // count how many slides there are
      const dotCount = document.querySelectorAll(
        ".featured-slider__slide"
      ).length;

      // Generate the HTML for the navigation dots
      let dotHTML = "";
      for (let i = 0; i < dotCount; i++) {
        dotHTML += ``;
      }

      // Add the dots HTML to the DOM
      document
        .querySelector(".featured-slider > .glide__bullets")
        .insertAdjacentHTML("beforeend", dotHTML);

      // Actually initialize the glide / slider script
      var glide = new Glide(".featured-slider", {
        type: "carousel",
        perView: 4,
        // autoplay: 1000,
      });

      glide.mount();
    }
  }
}

export default FeaturedCarousel;

Here is the issue I am encountering: The styles generated by glideJS for the glide__slides div

I have found the issue on the glideJS github: https://github.com/glidejs/glide/issues/654

I have tried one of the suggested solutions as you can see where I commented out pretty much all center alignments.

I have tried overwriting the transform but it breaks the autoplay and navigation functions because the only way to overwrite it is with the "!important" tag.

I have another working carousel on the same page that is working perfectly fine but I have updated all the classes to be unique and using the scss hierarchy for styling.

GlideJS Renders slides too far off screen

Answers (1)

Related Questions