Карусель продолжает привязываться к началу страницы при смене изображения

Question

Я использую react-slick и проблема у меня заключается в том, что всякий раз, когда карусель меняется, она автоматически привязывается к верхней части страницы, независимо от того, где вы были на странице.

Это все изменения, которые я сделал через CSS.

.slick-slider {
   position: relative;
}
.slick-dots {
    position: absolute;
    bottom: 10px;
    z-index: 1;
}

.slick-dots li.slick-active button:before {
    color: white;
    opacity: 1;
}

.slick-dots li button:before {
    color: white;
}

Это мои настройки, которые я передаю в компонент:

class Carousel extends React.Component {
    render() {
        const settings = {
            dots: true,
            speed: 500,
            slidesToShow: 0,
            slidesToScroll: 1,
            fade: true,
            autoplay: true,
            infinite: true,
            arrows: false
    };

    return (
        <Slider {...settings}>
            {testImages.map((i, index) => 
                <div key={index}>
                     <CarouselImage imageSrc={`${i}`} />
                </div>)}
        </Slider>
    );
  }
}

Может кто-нибудь пролить свет на то, что я делаю неправильно и почему это происходит?

Отображается HTML:

<div class="slick-initialized slick-slider">
   <div class="slick-list">
      <div class="slick-track" style="opacity: 1; width: 5901px;">
         <div data-index="0" class="slick-slide slick-active slick-current" tabindex="-1" style="outline: none; position: relative; left: 0px; opacity: 1; visibility: visible; transition: opacity 500ms ease, visibility 500ms ease; width: 843px;">
            <div class="overflow-hidden carousel_image__container"><img class="carousel_image" src="https://via.placeholder.com/1900x1000/ff0000/000000" alt="Artist Carousel Image"></div>
         </div>
         <div data-index="1" class="slick-slide" tabindex="-1" style="outline: none; position: relative; left: -843px; opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease; width: 843px;">
            <div class="overflow-hidden carousel_image__container"><img class="carousel_image" src="https://via.placeholder.com/1900x1000/00ff00/000000" alt="Artist Carousel Image"></div>
         </div>
         <div data-index="2" class="slick-slide" tabindex="-1" style="outline: none; position: relative; left: -1686px; opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease; width: 843px;">
            <div class="overflow-hidden carousel_image__container"><img class="carousel_image" src="https://via.placeholder.com/1900x1000/0000ff/000000" alt="Artist Carousel Image"></div>
         </div>
      </div>
   </div>
   <ul class="slick-dots" style="display: block;">
      <li class="slick-active"><button>1</button></li>
      <li class=""><button>2</button></li>
      <li class=""><button>3</button></li>
   </ul>
</div>

Answer 1

Кажется, если absolute элемент позиции не ограничен relative элемент контейнера, который должен.

Просто для отладки попробуйте это в CSS:

div.slick-initialized.slick-slider {
   position: relative!important;
}

Если это поможет, то попробуйте без !important

Если !important требуется, тогда какой-то стиль в другом месте может изменить его значение.

Если ничего из этого не работает, щелкните правой кнопкой мыши на slick-list элемент div, проверьте его и просмотрите его css-код. При необходимости вы можете скопировать его на свой вопрос для дальнейшего рассмотрения. Сделайте то же самое для slick-track элемент div.