AJAX 模态中的 Slick Carousel 问题(Foundation Reveal)
Issue with Slick Carousel in AJAX modal (Foundation Reveal)
我正在使用 Reveal 来显示更多信息,其中有一个使用 Slick 的旋转木马。 Reveal 模态中的内容通过 AJAX.
拉入
我看到的问题是,当 Reveal 打开时,轮播在没有第一张图片的情况下加载,移动到第二张图片(加载有延迟),然后正常工作。下面以一段短片为例:http://cl.ly/323s1T1x3I21
我不确定如何让图片加载更快。
我的代码如下所示...
页面代码:
<div class="row">
<div class="large-16 columns right">
<h4>...</h4>
<p>... <a href="http://url/to/data" data-reveal-id="modal-vineyard" data-reveal-ajax="true" class="learn-more">Learn More »</a></p>
</div>
<div class="large-8 columns left">
...
</div>
被拉入的页面代码:
<div class="inner-carousel">
<div><img src="blah..."></div>
<div><img src="blah..."></div>
</div>
<!-- not including this results in slick not working at all -->
<script>
$(document).ready(function() {
$('.inner-carousel').slick({
autoplay: true,
autoplaySpeed: 4000,
arrows: false,
centerMode: true,
dots: true,
fade: true,
speed: 1000,
swipeToSlide: true
});
}); // end ready
</script>
不确定如何修复。非常感谢任何帮助。
所以JS不得不改成如下:
$("#modal-vineyard").on("opened", function() {
// $(".inner-carousel").slick("setPosition", 0);
$('.inner-carousel').slick({
setPosition: 0,
autoplay: true,
autoplaySpeed: 4000,
arrows: false,
centerMode: true,
dots: true,
fade: true,
speed: 1000,
swipeToSlide: true
});
});
我正在使用 Reveal 来显示更多信息,其中有一个使用 Slick 的旋转木马。 Reveal 模态中的内容通过 AJAX.
拉入我看到的问题是,当 Reveal 打开时,轮播在没有第一张图片的情况下加载,移动到第二张图片(加载有延迟),然后正常工作。下面以一段短片为例:http://cl.ly/323s1T1x3I21
我不确定如何让图片加载更快。
我的代码如下所示...
页面代码:
<div class="row">
<div class="large-16 columns right">
<h4>...</h4>
<p>... <a href="http://url/to/data" data-reveal-id="modal-vineyard" data-reveal-ajax="true" class="learn-more">Learn More »</a></p>
</div>
<div class="large-8 columns left">
...
</div>
被拉入的页面代码:
<div class="inner-carousel">
<div><img src="blah..."></div>
<div><img src="blah..."></div>
</div>
<!-- not including this results in slick not working at all -->
<script>
$(document).ready(function() {
$('.inner-carousel').slick({
autoplay: true,
autoplaySpeed: 4000,
arrows: false,
centerMode: true,
dots: true,
fade: true,
speed: 1000,
swipeToSlide: true
});
}); // end ready
</script>
不确定如何修复。非常感谢任何帮助。
所以JS不得不改成如下:
$("#modal-vineyard").on("opened", function() {
// $(".inner-carousel").slick("setPosition", 0);
$('.inner-carousel').slick({
setPosition: 0,
autoplay: true,
autoplaySpeed: 4000,
arrows: false,
centerMode: true,
dots: true,
fade: true,
speed: 1000,
swipeToSlide: true
});
});