光滑的轮播问题(初始加载时第一张幻灯片未正确呈现)

Issue with slick carousel (not rendering properly first slide on initial load)

我从 react-slick(效果很好)切换到 jQuery 原始版本,当我以完全相同的方式初始化轮播时,slick 无法在初始化后正确渲染第一张幻灯片页面加载。在你 select 第二张幻灯片之后,它工作正常。 It looks like this 然后加载背景图像,您看到的文本会跳到右边。

我尝试使用

让它工作
$('.your-element').slick('setPosition');

在顺利初始化之后,即使按照建议使用 setTimeout here,也需要一秒钟才能正确加载,这不是解决方案。在初始化 slick 之前,我尝试延迟加载轮播并为其设置 display:none,但它也没有帮助我。

在我的 html 文件轮播中,初始化如下:

  <section id="carousel">
      <div class="your-class">
        <div class="banner"> // first slide
             <div class="bg"></div> // that's the background-image
             <div class="flex-container">
                 <div class="flex-item">
                     <h1 class="slide__title">Title</h1>
                     <p class="slide__paragraph">
                        text
                     </p>
                     <p class="slide__paragraph">
                        text
                     </p>
                      <p class="slide__paragraph">
                         text
                      </p>
                     <p class="slide__paragraph">
                         text
                     </p>
                     <a>
                       More
                     </a>
                 </div>
             </div>
        </div>

         <div class="image-grid"> // second slide
                <div class="image01"></div>
                <div class="image02"></div>
                <div class="image03"></div>
                <div class="image04"></div>
                <div class="image05"></div>
                <div class="image06"></div>
         </div>
      </div>
  </section>

我希望我的轮播背景和文本同时加载,而文本不会从中间跳到旁边。如何解决?

试试这个。而不是 js 在 html 本身中传递设置并在 html.

之前加载 slick.js 和 slick.css
<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
      <div><h3>5</h3></div>
      <div><h3>6</h3></div>
  </div>

我做了以下事情; 首先将我的轮播设置为默认显示:none 属性;然后在js文件中

    setTimeout(function(){
        $('#carousel').attr("style","display: block");
        $('.your-class').slick({
           ....
        });
        }, 200);
};

所以我同意了