I have added the dots functionality within for each code, and also is there a way the slider can autoplay, can you pl. have a look once ?
https://codepen.io/syedazam/pen/OJgaRBd
/* for dots functionality s */
let dur = 1
let dots = document.querySelector(".dots")
// set slides background colors and create the nav dots
for (let i = 0; i < index.length; i++) {
gsap.set(index[i], {})
let newDot = document.createElement("div")
newDot.className = "dot"
newDot.index = i
navDots.push(newDot)
newDot.addEventListener("click", slideAnim)
dots.appendChild(newDot)
}
let allTheDots = dots.querySelectorAll(".dot")
gsap.set(dots, { xPercent: -25 })
const dotAnim = gsap.timeline({ paused: true })
dotAnim.to(
allTheDots,
{
stagger: { each: 1, yoyo: true, repeat: 1 },
scale: 1,
duration: 1,
rotation: 0.1,
backgroundColor: "#39FF14",
},
)
dotAnim.to(
index.length + 1,
{ y: -(index.length * 50), rotation: 0.01, ease: "none" },
0
)
dotAnim.time(1)
/* dot animation ends ********************************* */