如何解决光滑轮播中的图像不会第一次出现
问题是我的圆滑的轮播在页面加载时没有显示选定的图像。要显示图像,您必须从图像导航或箭头中进行选择,否则为空。这真的很奇怪,默认情况下它应该是这样工作的,我在控制台中没有错误。我是这样称呼它的:
<body>
<div class="slider position-relative" style="cursor: pointer;">
<div class='slider-for'>
<img src="{{asset('images/publications/cassettes/Djalma_front.jpg')}}" alt="">
<img src="{{asset('images/publications/cassettes/Djalma_back.jpg')}}" alt="">
<img src="{{asset('images/publications/cassettes/Djalma_inside_2.jpg')}}" alt="">
</div>
<div class="slider-nav">
<img src="{{asset('images/publications/cassettes/Djalma_front.jpg')}}" alt="">
<img src="{{asset('images/publications/cassettes/Djalma_back.jpg')}}" alt="">
<img src="{{asset('images/publications/cassettes/Djalma_inside_2.jpg')}}" alt="">
</div>
</div>
<script>
$('.slider-for').slick({
slidesToShow: 1,slidesToScroll: 1,arrows: true,speed: 300,fade: true,infinite: true,asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,asNavFor: '.slider-for',focusOnSelect: true
});
</script>
</body>
在这里您可以看到问题 https://prnt.sc/17neizt 的可视化。在这里,如果我点击下面的图片,它会起作用,但它不会在开头显示
解决方法
请尝试使用 window.load 函数。请参阅下面的代码。
<body>
<div class="slider position-relative" style="cursor: pointer;">
<div class='slider-for'>
<img src="{{asset('images/publications/cassettes/Djalma_front.jpg')}}" alt="">
<img src="{{asset('images/publications/cassettes/Djalma_back.jpg')}}" alt="">
<img src="{{asset('images/publications/cassettes/Djalma_inside_2.jpg')}}" alt="">
</div>
<div class="slider-nav">
<img src="{{asset('images/publications/cassettes/Djalma_front.jpg')}}" alt="">
<img src="{{asset('images/publications/cassettes/Djalma_back.jpg')}}" alt="">
<img src="{{asset('images/publications/cassettes/Djalma_inside_2.jpg')}}" alt="">
</div>
</div>
<script>
$(window).on('load',function(){
setTimeout(function(){
$('.slider-for').slick({
slidesToShow: 1,slidesToScroll: 1,arrows: true,speed: 300,fade: true,infinite: true,asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,asNavFor: '.slider-for',focusOnSelect: true
});
},1000);
});
</script>
</body>
,
我解决了我的问题,这真是个愚蠢的错误。轮播显示在我在函数中调用的模式中。问题是我在该函数之外调用了我的光滑函数,结果搞砸了。当我将 slick 放在我调用该模式的函数中时,它开始完美地工作。无论如何,感谢您的帮助:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。