CODEWITHSUNDEEP
cssreactjscss-positionreact-slick
Strahinja Ajvaz
Strahinja Ajvaz

Reputation: 2643

carousel keeps anchoring to the top of page on image change

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>

Upvotes: 0

Views: 1628

Answers (1)

D.B.
D.B.

Reputation: 1782

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.

Upvotes: 1

Related Questions