光滑轮播中的图像不会第一次出现

编程问答 2022-04-22

问题描述

问题是我的圆滑的轮播在页面加载时没有显示选定的图像。要显示图像，您必须从图像导航或箭头中进行选择，否则为空。这真的很奇怪，默认情况下它应该是这样工作的，我在控制台中没有错误。我是这样称呼它的：

<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 放在我调用该模式的函数中时，它开始完美地工作。无论如何，感谢您的帮助:)

carouseljquerylaravellaravelslick.js