<div class="slider-layout">

    <div class="slider">

      <div class="slider-content">

        <div class="slider-item">

          <a href="javascript:;"><img src="./imgs/1.jpg" alt="1" class="slider-img" /></a>

        </div>

        <div class="slider-item">

          <a href="javascript:;"><img src="./imgs/2.jpg" alt="1" class="slider-img" /></a>

        </div>

        <div class="slider-item">

          <a href="javascript:;"><img src="./imgs/3.jpg" alt="1" class="slider-img" /></a>

        </div>

        <div class="slider-item">

          <a href="javascript:;"><img src="./imgs/4.jpg" alt="1" class="slider-img" /></a>

        </div>

      </div>

    </div>

    <button id="prev" class="prev">

      <</button> <button id="next" class="next">>

    </button>

  </div>

  <script src="base.js"></script>

  <script>

    const box = document.querySelector('.slider-layout');

    const prevDom = document.getElementById('prev');

    const nextDom = document.getElementById('next');

    box.addEventListener('mouseover',()=>{

      prevDom.style.display = "block";

      nextDom.style.display = "block";

    })

    box.addEventListener('mouseleave',()=>{

      prevDom.style.display = "none";

      nextDom.style.display = "none";

    })

    class Slider extends BaseSlider {

      constructor(el, options) {

        super(el, options);

        this._move();

      }

      _move() {

        prevDom.addEventListener('click', () => {

          this.prev();

        })

        nextDom.addEventListener('click', () => {

          this.next();

        })

      }

    }

    new Slider(document.querySelector('.slider'), {

      initialIndex: 2,

      speed: 2000

    })