carousel keeps anchoring to the top of page on image change

Question

I'm using react-slick 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.

These are all the changes that ive made through 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;
}

These are my settings that i pass into the component:

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>
    );
  }
}

Can anyone shed some light on what I'm doing wrong and why this is occurring?

Rendered 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>

Can you inspect the element (ctr-shift-i) and copy the rendered HTML output here (in your question) to review. — D.B., Mar 02 '18 at 01:52

score 1 · Accepted Answer · answered Mar 02 '18 at 02:17

It seems like if the absolute position element is not being restricted by the relative container element, which it should.

Just to debug, try this in the css:

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

If that helps, then try it without the !important

If the !important is required, then some style elsewhere might be changing it's value.

If none of this works, then right click on slick-list div element, inspect it and review it's css code. You can copy it to your question for further review, if necessary. Do the same for the slick-track div element.

Thank you! i was stuck for a while. – Strahinja Ajvaz Mar 02 '18 at 03:14 — Strahinja Ajvaz, Mar 02 '18 at 03:14

carousel keeps anchoring to the top of page on image change

1 Answers1