时间戳

首页 > 解决方案 > 光滑轮播中的图像不会第一次出现

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

问题描述

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

<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。在这里，如果我单击下面的图像，它将起作用，但在开始时未显示

标签： jquerycsslaravelcarouselslick.js

解决方案

请尝试使用 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>

推荐阅读