轮播在图像更改时不断锚定到页面顶部

Posted 2023-02-25

【中文标题】轮播在图像更改时不断锚定到页面顶部

【英文标题】：carousel keeps anchoring to the top of page on image change

【发布时间】：2018-03-02 01:40:55

【问题描述】：

我正在使用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" ></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" ></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" ></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>

【问题讨论】：

您能否检查元素 (ctr-shift-i) 并在此处（在您的问题中）复制呈现的 HTML 输出以进行查看。

@signal2013 我已经添加了渲染的html

【参考方案1】：

似乎absolute 位置元素不受relative 容器元素的限制，这是应该的。

只是为了调试，在 css 中试试这个：

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

如果有帮助，请尝试不使用 !important

如果需要!important，那么其他地方的某些样式可能会改变它的值。

如果这些都不起作用，则右键单击 slick-list div 元素，检查它并查看它的 css 代码。如有必要，您可以将其复制到您的问题中以供进一步审查。对slick-track div 元素执行相同操作。

【讨论】：

谢谢！我被困了一段时间。

当然。很高兴你通过了。