时间戳

首页 > 解决方案 > Smoothslider 在滑块加载之前短暂闪烁第二张幻灯片

javascript - Smoothslider 在滑块加载之前短暂闪烁第二张幻灯片

问题描述

此网站上的平滑滑块在滑块加载并开始动画之前会短暂闪烁第二张幻灯片，从而导致不希望出现的跳跃/故障过渡。根据我的研究，一个常见的问题是无法隐藏幻灯片，但我将 .smoothslides img 设置为 display: none，所以理论上滑块应该在显示幻灯片之前加载；然而，事实并非如此。在任何 Smoothslides JS 之前，调用 jQuery 加载到我的页脚中。我不是最初编写此滑块的人，所以我无法深入了解问题的根源。有人可以帮忙吗？这是我的 HTML：

    <div class="smoothslides" id="myslideshow1">
     <img src="https://static1.squarespace.com/static/5d7dcf2f4aa87244f2fb32a1/t/5f1890abc9bd786bf3fed378/1595445421630/Basile-Studio-Puesto-final-comp.jpg"/>
     <img src="https://static1.squarespace.com/static/5d7dcf2f4aa87244f2fb32a1/t/5f1890a2b722c11f6a8429f4/1595445411836/Basile-Studio-Morning-Glory-comp.jpg"/>
     <img src="https://static1.squarespace.com/static/5d7dcf2f4aa87244f2fb32a1/t/5f189093854e74659bd5ed71/1595445396781/Basile-Studio-Born-and-Raised-comp.jpg"/>
     <img src="https://static1.squarespace.com/static/5d7dcf2f4aa87244f2fb32a1/t/5f189078e66d0232eba2d17c/1595445369161/Basile-Studio-Built-Box-Pendant-comp.jpg"/>
    </div>
    <img src="https://fiddle-azalea-2t8y.squarespace.com/s/banner-logo-2.png" class="logo_header"/>
   </div>

这是JS：

jQuery(document).ready(function ($){
  
    $('#myslideshow1').smoothSlides({
      effectDuration: 10000,
      transitionDuration: 500,
      effect: 'zoomIn',
      navigation:false,
      pagination:false
        /* no comma on last option */
        });
  
if(jQuery("body").hasClass("homepage"))
   homepage=1;
});

标签： javascripthtmljquerycss

解决方案

推荐阅读