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

Question

问题是我的 slick carousel 在页面加载时不显示 selected 图像。要显示图像，您必须 select 从图像导航或箭头，否则它是空的。真的很奇怪，默认情况下应该是这样的，我在控制台没有报错。我是这样称呼它的：

<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,
          slidesToScroll: 1,
          asNavFor: '.slider-for',
          infinite: true,
          focusOnSelect: true
        });
    
    </script>
</body>

在这里您可以看到问题的可视化 https://prnt.sc/17neizt。在这里，如果我点击下面的图片，它会起作用，但它不会在开头显示

Answer 1

请尝试使用 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,
                  slidesToScroll: 1,
                  asNavFor: '.slider-for',
                  infinite: true,
                  focusOnSelect: true
                });
            },1000);
            
        });
        
    
    </script>
</body>

Answer 2

我解决了我的问题，这真是愚蠢的错误。旋转木马以我在函数中调用的模式显示。问题是我在那个函数之外调用了我的 slick，它变得一团糟。当我将 slick 放在我调用该模式的函数中时，它开始完美地工作。无论如何感谢您的帮助:)

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

Images in a slick carousel don't appear first time

jquery

css

laravel

carousel

slick.js