长话短说，添加一个旋转木马到一个WordPress网站。我使用glideJS为此，我遇到了一个问题，其中宽度和转换值是荒谬的大，幻灯片渲染离屏幕。
附加上下文：我正在使用wordpress wp-scripts来构建js和scss包。构建正确编译，并且正确注册，因为我在其他地方也使用了glideJS幻灯片。
下面是截图和代码：
从我的front-page.php片段，这是问题的carousel：

<div class="featured-slider">
              <div data-glide-el="track" class="glide__track">
                <div class="glide__slides">
                  
                  <div class="featured-slider__slide">
                      <div class="featured-slider__interior">
                          <div class="card-window">

                          </div>
                      </div>
                  </div>
                  <div class="featured-slider__slide">
                      <div class="featured-slider__interior">
                          <div class="card-window">

                          </div>
                      </div>
                  </div>
                  <div class="featured-slider__slide">
                      <div class="featured-slider__interior">
                          <div class="card-window">

                          </div>
                      </div>
                  </div>
                  <div class="featured-slider__slide">
                      <div class="featured-slider__interior">
                          <div class="card-window">

                          </div>
                      </div>
                  </div>
                  <div class="featured-slider__slide">
                      <div class="featured-slider__interior">
                          <div class="card-window">

                          </div>
                      </div>
                  </div>         
                </div>
              </div>
              <div class="slider__bullets glide__bullets" data-glide-el="controls[nav]"></div>
      </div>

字符串
下面是正在使用的scss：

.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%;
      }
    }
  }

型
挂载glideJS的js代码：（HeartBullet只是一个用于旋转木马项目符号的心形图标）

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 += `<button class="slider__bullet glide__bullet" data-glide-dir="=${i}" style="background-image: url(${HeartBullet})"></button>`;
      }

      // 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;

型
下面是我遇到的问题：The styles generated by glideJS for the glide__slides div
我在github上找到了这个问题：https://github.com/glidejs/glide/issues/654
我已经尝试了一个建议的解决方案，你可以看到，我注解了几乎所有的中心路线。
我试过修改transform，但它破坏了自动播放和导航功能，因为覆盖它的唯一方法是使用“！important”标签。
我有另一个工作carousel在同一个页面上，工作得很好，但我已经更新了所有的类是唯一的，并使用scss层次结构的样式。