(() => {
  const imgelarr = document.queryselectorall(".slideshow_contentimg");
  const left = document.queryselector(".slideshow_leftarrow");
  const right = document.queryselector(".slideshow_rightarrow");
  const controlbars = document.queryselectorall(".slideshow_controlbaritem");
  const pages = document.queryselector(".slideshow_pages");
  let current = 0;
  const changevisibleimage = (nextindex) => {
    imgelarr[current].style.animation = "move-out 3s forwards";
    controlbars[current].classlist.remove("slideshow_controlbaritem__active");
    current = nextindex;
    if (current >= imgelarr.length) current = 0;
    if (current < 0) current = imgelarr.length - 1;
    imgelarr[current].style.animation = "move-in 1s forwards";
    controlbars[current].classlist.add("slideshow_controlbaritem__active");
    pages.innerhtml = (array(2).fill(0).join() + (current + 1)).slice(-2);
  };
  changevisibleimage(0);
  let autochange = setinterval(() => {
    changevisibleimage(current + 1);
  }, 6000);
  left.addeventlistener(
    "click",
    throttle(() => {
      changevisibleimage(current - 1);
      clearinterval(autochange);
      autochange = setinterval(() => {
        changevisibleimage(current + 1);
      }, 6000);
    }, 1000)
  );
  right.addeventlistener(
    "click",
    throttle(() => {
      changevisibleimage(current + 1);
      clearinterval(autochange);
      autochange = setinterval(() => {
        changevisibleimage(current + 1);
      }, 6000);
    }, 1000)
  );
  controlbars.foreach((item, index) => {
    item.addeventlistener(
      "click",
      throttle(() => {
        if (current === index) return;
        changevisibleimage(index);
        clearinterval(autochange);
        autochange = setinterval(() => {
          changevisibleimage(current + 1);
        }, 6000);
      }, 3000)
    );
  });
})();