title: carousel keeps anchoring to the top of page on image change
body: <p>I'm using <code>react-slick</code> and the problem I have is that whenever the carousel changes, it automatically anchors to the top of the page irrelevant of where you were on the page.</p>
  
  <p>These are all the changes that ive made through css.</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>These are my settings that i pass into the component: </p>
  
  <pre><code>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 (
          &lt;Slider {...settings}&gt;
              {testImages.map((i, index) =&gt; 
                  &lt;div key={index}&gt;
                       &lt;CarouselImage imageSrc={`${i}`} /&gt;
                  &lt;/div&gt;)}
          &lt;/Slider&gt;
      );
    }
  }
  </code></pre>
  
  <p>Can anyone shed some light on what I'm doing wrong and why this is occurring? </p>
  
  <p>Rendered html:</p>
  
  <pre><code>&lt;div class="slick-initialized slick-slider"&gt;
     &lt;div class="slick-list"&gt;
        &lt;div class="slick-track" style="opacity: 1; width: 5901px;"&gt;
           &lt;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;"&gt;
              &lt;div class="overflow-hidden carousel_image__container"&gt;&lt;img class="carousel_image" src="https://via.placeholder.com/1900x1000/ff0000/000000" alt="Artist Carousel Image"&gt;&lt;/div&gt;
           &lt;/div&gt;
           &lt;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;"&gt;
              &lt;div class="overflow-hidden carousel_image__container"&gt;&lt;img class="carousel_image" src="https://via.placeholder.com/1900x1000/00ff00/000000" alt="Artist Carousel Image"&gt;&lt;/div&gt;
           &lt;/div&gt;
           &lt;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;"&gt;
              &lt;div class="overflow-hidden carousel_image__container"&gt;&lt;img class="carousel_image" src="https://via.placeholder.com/1900x1000/0000ff/000000" alt="Artist Carousel Image"&gt;&lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;ul class="slick-dots" style="display: block;"&gt;
        &lt;li class="slick-active"&gt;&lt;button&gt;1&lt;/button&gt;&lt;/li&gt;
        &lt;li class=""&gt;&lt;button&gt;2&lt;/button&gt;&lt;/li&gt;
        &lt;li class=""&gt;&lt;button&gt;3&lt;/button&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>