javascript - Glidejs 控件不起作用 Next/Prev 按钮和鼠标滑动

Question

我正在使用 glidejs 向我的网页添加一个滑块，但我没有收到错误消息。下一个/上一个按钮不起作用，加上用鼠标滑动也无法控制滑块。你有什么办法解决这个问题吗？

//<--!html-->

<div class="glide hero">
    <div class="glide__track" data-glide-el="track">
           <ul class="glide__slides">
            <li class="glide__slide slider"></li>
            <li class="glide__slide slider"></li>
            <li class="glide__slide slider"></li>
            <li class="glide__slide slider"></li>
        </ul>
       </div>
       <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--prev" data-glide-dir="<">prev</button>
        <button class="glide__arrow glide__arrow--next" data-glide-dir=">">next</button>
       </div>
    </div>

//CSS

    .slider{
                background-image: $slide1;
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: center;
                border-radius: 5px;
                height: 300px;
                top: 0vh;
                position: relative;

                }
                .glide__arrows{
                    position: relative;
                    display: flex;
                    .space{
                        width: 80%;
                    }
                }
                .glide__arrow{
                    display: flex;
                    flex-flow: row;
                    font-size: 16px;
                    background-color:$primaryColor;
                    position: relative;

                }

// javascript 启动滑块

    var glideHero = new Glide('.hero', {
      type: 'carousel',
      animationDuration: 2000,
      autoplay: 4500,
      focusAt: '2',
      startAt: 2,
      perView: 1, 
    });

    glideHero.mount();

Answer 1

尝试glide__arrows搬入glide__track

<div class="glide hero">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide slider"></li>
      <li class="glide__slide slider"></li>
      <li class="glide__slide slider"></li>
      <li class="glide__slide slider"></li>
    </ul>
    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--prev" data-glide-dir="<">prev</button>
      <button class="glide__arrow glide__arrow--next" data-glide-dir=">">next</button>
    </div>
  </div>
</div>