https://www.ufmg.br//app/themes/portal-ufmg/js/banner.js?ver=1.0.0

1const swiper = new Swiper(".mySwiper", {
2  pagination: {
3    el: ".swiper-pagination",
4    clickable: true,
5    renderBullet(index, _) {
6      return `<span class="swiper-pagination-bullet m-0 !w-auto !h-auto !rounded-none border-b border-b-neutral-50 p-[0.62rem] text-base md:text-lg font-semibold text-neutral-50/40 aria-[current=true]:text-neutral-50 !bg-transparent transition-colors !opacity-100">${String(
7        index + 1
8      ).padStart(2, "0")}</span>`;
9    },
10  },
11  effect: "fade",
12  autoplay: {
13    delay: 6000,
14    disableOnInteraction: false,
15  },
16  loop: true,
17});
18
19const btnToggleSwiperState = document.createElement("button");
20btnToggleSwiperState.classList.add(
21  "group",
22  "text-[1.25rem]",
23  "md:text-[1.5rem]",
24  "text-neutral-50"
25);
26btnToggleSwiperState.ariaLabel = "Pausar rolagem de banners";
27btnToggleSwiperState.innerHTML =
28  '<i class="ti ti-player-play group-data-[state=play]:hidden"></i><i class="ti ti-player-pause group-data-[state=pause]:hidden"></i>';
29btnToggleSwiperState.setAttribute("data-state", "play");
30btnToggleSwiperState.addEventListener("click", (event) => {
31  if (event.currentTarget.getAttribute("data-state") !== "pause") {
32    btnToggleSwiperState.ariaLabel = "Retomar rolagem de banners";
33    swiper.autoplay.stop();
34    event.currentTarget.setAttribute("data-state", "pause");
35    return;
36  }
37
38  swiper.autoplay.start();
39  event.currentTarget.setAttribute("data-state", "play");
40});
41
42document.querySelector(".swiper-pagination").appendChild(btnToggleSwiperState);