I am currently creating an image slider and basing my code on the following: https://codepen.io/Snip3r/pen/GxybbN

{
    const sliders = document.querySelectorAll(".c-template__slider");

    for (let i = 0; i < sliders.length; ++i) {
        const slider = sliders[i];
        const dots = slider.querySelector(".c-template__dots");
        const sliderImgs = slider.querySelectorAll(".c-template__img");

        let currImg = 0;
        let prevImg = sliderImgs.length - 1;
        let timeout;

        for (let i = 0; i < sliderImgs.length; ++i) {
            const dot = document.createElement("div");
            dot.classList.add("dot");
            dots.appendChild(dot);
            dot.addEventListener("click", dotClick.bind(null, i), false);
        }

        const allDots = dots.querySelectorAll(".dot");
        allDots[0].classList.add("active-dot");

        sliderImgs[0].style.left = "0";

        function animateSlider(nextImg, right) {
            if (!nextImg)
                nextImg = currImg + 1 < sliderImgs.length ? currImg + 2 : 1;

            --nextImg;
            sliderImgs[prevImg].style.animationName = "";

            if (!right) {
                sliderImgs[nextImg].style.animationName = "leftNext";
                sliderImgs[currImg].style.animationName = "leftCurr";
            }
            else {
                sliderImgs[nextImg].style.animationName = "rightNext";
                sliderImgs[currImg].style.animationName = "rightCurr";
            }

            prevImg = currImg;
            currImg = nextImg;

            currDot = allDots[currImg];
            currDot.classList.add("active-dot");
            prevDot = allDots[prevImg];
            prevDot.classList.remove("active-dot");
        }

        function dotClick(num) {
            if (num == currImg)
                return false;

            clearTimeout(timeout);

            if (num > currImg)
                animateSlider(num + 1);
            else
                animateSlider(num + 1, true);
        }

    }
}

This slider has everything I need except one thing - swipe functionality on mobile devices between each image.

Does anybody know of any additional JS code that I can add which will enable this functionality? I have been told that I cannot use a library - only Vanilla JS.

I assume it is something similar to adding a touch event listener to each one and then using the functions for nextImg etc, but again, I am not proficient enough in JS to understand so I am reaching out!

I hope someone can help. Thanks.

Note: the code I have pasted here is my own code and is slightly different to the linked code as I have removed the interval and added my own classes, but the rest is the same.