Dots do not change when sliding

When changing a slide, the dots does not change, I used a slick slider, I will attach the code and photo below. Help implement I need that after clicking on the arrow, dots change to the next At the moment she stays where she is. Dots are implemented as span elements The buttons are built into the slider, I didn’t do it myself, I took it ready, so there were difficulties, I hope the description is enough

HTML

    <div class="image-slider swiper">
        <div class="image-slider__wrapper swiper-wrapper">
            <div class="image-slider__slide swiper-slide">
                <div class="image-slider__image">
                    <img src="img/main screen/image1.jpg" alt="main screen">                                    
                </div>
            </div>
            <div class="image-slider__slide swiper-slide">
                <div class="image-slider__image image-slider__image2">
                    <img src="img/main screen/image2.jpg" alt="main screen">                                    
                </div>
            </div>
            <div class="image-slider__slide swiper-slide">
                <div class="image-slider__image image-slider__image3">
                    <img src="img/main screen/image3.jpg" alt="main screen">                                
                </div>
            </div>
            <div class="image-slider__slide swiper-slide">
                <div class="image-slider__image image-slider__image4">
                    <img src="img/main screen/image4.jpg" alt="main screen">                                
                </div>
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-span">
            <span></span>
            <span></span>
        </div>
        <div class="swiper-button-next"></div>
        <h1 class="main-screen__title">Thoughtful making of space</h1>
        <a href="" class="main-screen__discover">Discover more</a>
        <div class="main-screen__discover-span"><span></span></div>
        <div class="main-screen__contact_social">
            <a href="" class="social-links">Fb</a>
            <a href="" class="social-links">In</a>
            <a href="" class="social-links">Be</a>
        </div>
        <div class="main-screen__select_container">
            <div class="main-screen__select-span"></div>
            <select name="select"> <!--Supplement an id here instead of using 'name'-->
                <option value="value1">Kiev</option>
                <option value="value2" selected>Lviv</option>
                <option value="value3">Kharkiv</option>
              </select>
        </div>
        <div class="main-screen__contact_phone-mail">
            <a href="" class="social-phone">+380983527547</a>
            <a href="" class="social-email">info@gmail.com</a>
        </div>
        <div class="main-screen__next-project">
            <div class="next-project_s">Next Project</div>
            <div class="next-project_b">Perfect proportions</div>
        </div>
    </div>

CSS

.main-screen {
    background-color: #fff;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
            flex: 1 0 100%;
    position: relative;
    min-width: 0;
  }
  .main-screen__contact_social {
    position: absolute;
    z-index: 2;
    top: 92%;
    left: 4.3%;
  }
  .main-screen__contact_social .social-links {
    font-weight: 600;
    font-size: 11px;
    line-height: 13px;
    letter-spacing: 0.06em;
    color: #FFFFFF;
    padding: 0px 8px;
    font-family: 'PT Sans', sans-serif;
  }
  .main-screen__contact_social .social-links:first-child {
    padding: 0px 8px 0px 0px;
  }
  .main-screen__contact_social .social-links:hover {
    color: #afabab;
  }
  .main-screen__contact_phone-mail {
    position: absolute;
    z-index: 2;
    top: 92%;
    left: 30.3%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 0;
  }
  .main-screen__contact_phone-mail .social-phone, .main-screen__contact_phone-mail .social-email {
    font-weight: 600;
    font-size: 11px;
    line-height: 13px;
    letter-spacing: 0.06em;
    color: #FFFFFF;
    font-family: 'PT Sans', sans-serif;
  }
  .main-screen__contact_phone-mail .social-phone:hover, .main-screen__contact_phone-mail .social-email:hover {
    color: #0F0F0F;
    opacity: 0.7;
    font-family: 'PT Sans', sans-serif;
  }
  .main-screen__contact_phone-mail .social-phone {
    padding-right: 51px;
  }
  @media (max-width: 1024px) {
    .main-screen__contact_phone-mail {
      left: 45.3%;
    }
  }
  @media (max-width: 612px) {
    .main-screen__contact_social {
      display: none;
    }
    .main-screen__contact_phone-mail {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      top: 88.3%;
    }
    .main-screen__contact_phone-mail .social-phone {
      padding-bottom: 5px;
    }
  }
  .main-screen__title {
    position: absolute;
    max-width: 500px;
    top: 35%;
    left: 18%;
    z-index: 2;
    font-weight: 700;
    font-size: 56px;
    line-height: 68px;
    color: #FFFFFF;
    font-family: 'PT Sans', sans-serif;
  }
  @media (max-width: 1024px) {
    .main-screen__title {
      font-size: 48px;
    }
  }
  @media (max-width: 768px) {
    .main-screen__title {
      max-width: 270px;
      font-size: 44px;
      line-height: 54px;
    }
  }
  @media (max-width: 612px) {
    .main-screen__title {
      font-size: 40px;
      line-height: 39px;
      left: 5%;
    }
  }
  .main-screen__discover {
    position: absolute;
    top: 60%;
    left: 20%;
    z-index: 2;
    font-weight: 700;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FFFFFF;
    font-family: 'PT Sans', sans-serif;
  }
  .main-screen__discover-span {
    display: block;
    position: absolute;
    top: 60.75%;
    left: 29%;
    width: 56px;
    height: 2px;
    z-index: 2;
  }
  .main-screen__discover-span span {
    top: 0px;
    left: 0px;
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #fff;
    opacity: 0.5;
  }
  @media (max-width: 1199px) {
    .main-screen__discover-span {
      left: 31%;
    }
  }
  @media (max-width: 948px) {
    .main-screen__discover-span {
      left: 34%;
      opacity: 0.9;
    }
  }
  @media (max-width: 612px) {
    .main-screen__discover {
      top: 67%;
      left: 6%;
    }
    .main-screen__discover-span {
      top: 68%;
      left: 31%;
    }
  }
  .main-screen__next-project {
    position: absolute;
    z-index: 2;
    top: 63%;
    right: -85px;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  .main-screen__next-project .next-project_s {
    font-weight: 600;
    font-size: 11px;
    line-height: 13px;
    letter-spacing: 0.06em;
    padding: 0px 0px 8px 0px;
    color: #fff;
    font-family: 'PT Sans', sans-serif;
  }
  .main-screen__next-project .next-project_b {
    max-width: 350px;
    font-weight: 700;
    font-size: 48px;
    line-height: 47px;
    letter-spacing: 0.04em;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-family: 'PT Sans', sans-serif;
  }
  @media (max-width: 1024px) {
    .main-screen__next-project .next-project_b {
      font-size: 32px;
      line-height: 31px;
    }
  }
  @media (max-width: 768px) {
    .main-screen__next-project {
      right: -125px;
    }
    .main-screen__next-project .next-project_b {
      max-width: 450px;
    }
  }
  @media (max-width: 612px) {
    .main-screen__next-project {
      top: 71%;
      right: -70px;
    }
    .main-screen__next-project .next-project_s {
      display: none;
    }
    .main-screen__next-project .next-project_b {
      max-width: 450px;
      font-size: 18px;
      line-height: 18px;
      -webkit-text-fill-color: #fff;
      -webkit-text-stroke: 0px;
    }
  }
  .main-screen__select_container {
    position: absolute;
    z-index: 2;
    top: 91.5%;
    left: 263px;

    select{
        width: 117px;
        height: 24px;
        background: rgba(255, 255, 255, 0.5);
        box-shadow: 0px 1.15336px 1.22544px rgba(0, 0, 0, 0.2), inset 0px -0.288339px 0.0720847px rgba(255, 255, 255, 0.23);
        backdrop-filter: blur(2px);
        border-radius: 8.70783px;
        font-family: 'PT Sans', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 11px;
        line-height: 13px;
        letter-spacing: 0.06em;
        color: #080808;
    }
  }
  

  @media (max-width: 1024px) {
    .main-screen__select_button {
      background-color: transparent;
      border-width: 1px;
      border-style: solid;
      border-color: #C4C4C4;
    }
    .main-screen__select_container {
      left: 25%;
    }
  }
  @media (max-width: 612px) {
    .main-screen__select_container {
      left: 4%;
    }
  }
  
  @media (min-width: 1881px) {
    .main-screen {
      max-height: 1000px;
    }
  }
  @media (max-width: 1880px) {
    .main-screen {
      max-height: 880px;
    }
  }
  @media (max-width: 880px) {
    .main-screen {
      max-height: 720px;
    }
  }
  @media (max-width: 612px) {
    .main-screen {
      max-height: 550px;
    }
  }
  .image-slider {
    position: relative;
  }
  .image-slider__image img {
    width: 100%;
  }
  @media (min-width: 1881px) {
    .image-slider__image img {
      height: 1000px;
    }
  }
  @media (max-width: 1880px) {
    .image-slider__image img {
      height: 880px;
    }
  }
  @media (max-width: 880px) {
    .image-slider__image img {
      height: 720px;
    }
  }
  @media (max-width: 612px) {
    .image-slider__image img {
      height: 500px;
    }
  }
  .image-slider .swiper-slide {
    width: auto;
  }
  .image-slider .swiper-button-prev {
    position: absolute;
    left: 65%;
    top: 61%;
  }
  .image-slider .swiper-button-next {
    position: absolute;
    right: 16%;
    top: 61%;
  }
  @media (max-width: 612px) {
    .image-slider .swiper-button-prev {
      left: 16.5%;
      top: 31%;
    }
    .image-slider .swiper-button-next {
      right: 40%;
      top: 31%;
    }
  }
  .image-slider .swiper-button-prev::after, .image-slider .swiper-button-next::after {
    font-size: 8px;
    color: #fff;
  }
  
  .swiper-span {
    display: block;
    position: absolute;
    left: 68%;
    top: 61%;
    width: 12.25%;
    height: 2px;
    z-index: 5;
  }
  .swiper-span span {
    top: 0px;
    left: 0px;
    position: absolute;
    width: 50%;
    height: 1px;
    background-color: #fff;
  }
  .swiper-span span:first-child {
    left: 0px;
    height: 2px;
  }
  .swiper-span span:last-child {
    left: 54%;
    opacity: 0.32;
  }
  
  @media (max-width: 612px) {
    .swiper-span {
      left: 23%;
      top: 31%;
      width: 28.25%;
    }
    .swiper-span span:first-child {
      height: 1px;
    }
  }
  

JS

New Swiper('.image-slider', {
    //Стрелки
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    //количество слайдов для показа
    slidesPerView: 1.37,
    breakpoints: {
        612: {
            slidesPerView: 1.17,
        }     
    },
    //отступ между слайдами
    //spaceBetween: -19,
    //количество пролистываемых слайдов
    slidesPerGroup: 1,
    //бесконечное прокручивание
    loop: true,
    //количество дублирующих слайдов
  //  loopedSlides: 3,
    //свободный режим
  //  freeMode: true,
    pagination: {
        el: '.swiper-pagination',
        type: 'progressbar'
    },
});

new Swiper('.news-slider',{
    //количество слайдов для показа
    slidesPerView: 'auto',
    //отступ между слайдами
    spaceBetween: 20,
    breakpoints: {
        769: {
            spaceBetween: 40,
        },
        1025: {
            spaceBetween: 48,
        }  
    },
    //бесконечное прокручивание
    loop: true,
        //свободный режим
    freeMode: true,
});

//select==============================================================================================

const selectButton = document.querySelector('.main-screen__select_button');
const selectList = document.querySelector('.main-screen__list');
const selectListItems = document.querySelectorAll('.main-screen__list-item');

//Клик по кнопке. Открыть, закрыть select
selectButton.addEventListener('click', function() {
    selectList.classList.toggle('main-screen__list--visible');
    this.classList.add('main-screen__select_button--active');
});

//Выбор элемента списка. Запомнить выбранное значение. Закрыть дропдаун
selectListItems.forEach(function (listItem) {
    listItem.addEventListener('click', function (e) {
        e.stopPropagation();
        selectButton.innerText = this.innerText;
        selectButton.focus();
        selectList.classList.toggle('main-screen__list--visible');
    })
})

//Клик снаружи дропдауна. Закрыть дропдаун
document.addEventListener('click', function (e) {
    if (e.target !== selectButton) {
        selectButton.classList.remove('main-screen__select_button--active');
        selectList.classList.remove('main-screen__list--visible');
    }
})