光滑的轮播问题(初始加载时第一张幻灯片未正确呈现)
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);
};
所以我同意了
我从 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);
};
所以我同意了