Проблемы с карусельными показателями

Question

У меня проблема с карусельными индикаторами. Я хотел бы иметь "щелчок карусель-индикаторов". Карусель имеет функцию автоматического воспроизведения. Я понятия не имею, как это сделать в Javascript (нажмите на пунктир в карусели и карусель изменит слайд). Заранее спасибо.

HTML

        <div class="slider">
            <img class="slider-img" src="images/slider/slider-1.png" alt=""/>
            <div class="">
                <div class="container main">
                <div class="row">
                    <div class="col-lg-4"></div>
                    <div class="col-lg-8">
                        <p>text</p>
                        <p>- text</p> 
                        <p><a href="#">text</a></p>
                    </div>
                </div>
                <div class="row dots">
                    <div class="col-10 rectangle-left">
                        <span class="rectangle activeSlider" id="one"></span>
                    </div>
                    <div class="col-2 rectangles-right">
                        <span class="rectangle" id="two"></span>
                        <span class="rectangle" id="three"></span>
                        <span class="rectangle" id="four"></span>
                    </div>
                    <div class="newsletter col-10">
                        <div class="panel ">
                            <img src="images/slider/newsletter.png" alt=""/>
                            <span>text</span>
                            <input type="email" placeholder=""/>
                        </div>
                    </div>
                    <div class=" col-2 btn-right">
                        <div class="btnZapisz">text</div>
                    </div>
                </div>
                </div>
            </div>
        </div>

SCSS

.slider {
    position: relative;
    top: -55px;
    height: 100%;
    overflow: hidden;

    &-img {
        width: 100%;
        height: 100%;
    }

    & .main {
        color: #fff;
        text-shadow: 2px 5px 5px #414141;
        position: absolute;
        top: 68%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: bold;

        & p:nth-child(1) {
            font-size: 49px;
            font-weight: bold;
            text-align: left;
            margin-bottom: -29px;
        }
            & p:nth-child(2) {
                font-size: 45px;
                text-align: right;
                letter-spacing: 2px;
                margin-top: 15px;
            }



        & p:nth-child(3){

            font-size: 24px;
            text-align: right;
            letter-spacing: 1px;

            margin-bottom: 240px;
            & a{
                color: white;
                text-decoration: none;
            }
        }

            & .dots{

               & .rectangle-left{
                    display: flex;
                    justify-content: flex-end;
                    margin-bottom: 15px;

                    padding-right: 0px;
               }

               & .rectangles-right{
                    display: flex;
                    justify-content: space-between;
               }

                    & .rectangle {
                        display: inline-block;
                        background-color: #fff;
                        margin-left: 8px;
                        width: 38px;
                        height: 14px;
                        cursor: pointer;

                        &.activeSlider {
                            background-color: $blue;
                        }

                    }

                    & .newsletter {
                        padding-right: 0;

                        & .panel {
                            display: flex;
                            align-items: center;
                            height: 90%;
                            padding: 5px 0;
                            background-color: #fff;



                            & span {
                                font-size: 20px;
                                margin-right: 10px;
                                color: $blue;
                                letter-spacing: 1px;
                                text-shadow: none;
                            }

                            & input {
                                width: 370px;
                                font-weight: bold;
                                padding-left: 7px;
                                border: 1px solid #ccc;
                                padding: 3px 0;
                            }
                        }

                    }

                    & .btn-right{
                        display: flex;
                        justify-content: flex-end;

                        & .btnZapisz {                          
                            width: 94%;
                            height: 90%;

                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 20px;
                            background-color: #fff;
                            text-shadow: none;
                            color: $blue;
                            border: none;
                            cursor: pointer;
                        }
                    }
            }

    }

}

const slideList = [{
    img: "images/slider/slider-1.png",
}, {
    img: "images/slider/slider-2.png",
}, {
    img: "images/slider/slider-3.png",
}, {
    img: "images/slider/slider-2.png",
}];


const image = document.querySelector('.slider-img');
const dots = [...document.querySelectorAll('.rectangle')];

let time = 1500;
let active = 0;

const changeDot = () => {
    const activeDot = dots.findIndex(dot => dot.classList.contains('activeSlider'));
    dots[activeDot].classList.remove('activeSlider');
    dots[active].classList.add('activeSlider');
}

const changeSlide = () => {
    active++;
    if (active === slideList.length) {
     active = 0;
    }
    image.src = slideList[active].img;
    changeDot();
 }
   let indexInterval = setInterval(changeSlide, time);


// const ClickChangeSlide = (e) => {

//     console.log(e.target);
//     clearInterval(indexInterval);
//     e.target.classList.add('activeSlider');    

//     if (active === slideList.length) {
//         active = 0;
//        } else if (active < 0) {
//         active = slideList.length - 1;
//        }

//      image.src = slideList[active].img;
//      changeDot();
//      indexInterval = setInterval(changeSlide, time);
//    }  
//    window.addEventListener('click', ClickChangeSlide );

В функции с комментариями я не могу написать мою проблему: /