Question

我从react-slick（像魅力一样工作）切换到jQuery原始版本，虽然我完全按照我的方式初始化轮播，但是在初始页面加载后，滑板无法正确渲染第一张幻灯片。选择第二张幻灯片后，它可以正常工作。 It looks like this然后加载背景图片，你看到的文字跳到右边。

我尝试使用

使其工作

$('.your-element').slick('setPosition');

在光滑初始化之后，即使使用建议here的setTimeout，也需要一秒钟来正确加载，这不是解决方案。在我初始化光滑之前，我试图懒得加载旋转木马并设置display：none，但它也没有帮助我。

在我的html文件中，carousel正在初始化，如下所示：

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

我希望我的旋转木马背景和文字可以同时加载而不会从中间向侧面跳跃文字。如何解决？

Answer 1

试试这个。而不是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>

Answer 2

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

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

所以我去了它

光滑轮播问题（初始加载时未正确渲染第一张幻灯片）

2 个答案: