Glidejs controls not working Next/Prev buttons and mouse swipe

Question

I'm using glidejs to add a slider to my webpage but i got no error message. the Next/Prev buttons not working and plus swipe with mouse also not able to control the slider. Do you have any way to solve this?

//<--!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 to start slider

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

    glideHero.mount();

Answer 1

Try moving glide__arrows into 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>