Bootstrap旋转木马的第一张幻灯片的问题

我的网站上有一个引导旋转木马。
这是缩短的HTML：Bootstrap旋转木马的第一张幻灯片的问题

<div id="myCarousel" class="hp-top carousel fade" data-ride="carousel" data-interval="6000"> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    </ol> 
    <div class="carousel-inner"> 
    <div id="first-slide" class="item active"> 

     <img src="" alt="Chicago" /> 
     <div class="carousel-caption"> 
     <div class="carousel-caption-inner"> 
      <p class="slider-text small"><span class="slider-padding">What makes</span> us <span class="slider-green">specialists?</span></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 

     <img src="" alt="Chicago" /> 
     <div class="carousel-caption"> 
     <div class="carousel-caption-inner"> 
      <p class="slider-text small"><span class="slider-padding">What makes</span> us <span class="slider-green">distinctive?</span></p> 
     </div> 
     </div> 
    </div> 
    </div>

我创建了一个功能，使在几秒钟的文本幻灯片后幻灯片中移动。
这是代码：

<script type="text/javascript"> 
var carouselContainer = jQuery('.carousel'); 
var slideInterval = 6000; 

jQuery(document).ready(function() { 
    if (jQuery(window).width() > 480) { 
    function toggleCaption() { 
     jQuery('.carousel-caption').hide(); 
     var caption = carouselContainer.find('.active').find('.carousel-caption'); 
     caption.delay(1000).toggle("slide", {direction:'right'}); 
    } 

    jQuery('#myCarousel').bind('slide.bs.carousel', function() { 
     jQuery('.carousel-caption').hide(); 
    }); 

    carouselContainer.on('slid.bs.carousel', function() { 
     toggleCaption(); 
    }); 
    } 
}); 
</script>

现在一切工作正常，但是当你第一次加载页面的最后一面旗帜显示出来了之前第一的旗帜显示了第二。
我想知道这是否与我的功能上面有关。
任何想法可能导致这种情况？

来源

2017-06-19 MariaL

看起来您已经在doc中准备好了一个条件内的函数。不要这样做。移动它的文档准备这样的范围：

<script type="text/javascript"> 
    var carouselContainer = jQuery('.carousel'); 
    var slideInterval = 6000;    

    jQuery(document).ready(function() { 
     if (jQuery(window).width() > 480) {      

      toggleCaption(); //replace function definition with call to function instead 

      jQuery('#myCarousel').bind('slide.bs.carousel', function() { 
       jQuery('.carousel-caption').hide(); 
      }); 

      carouselContainer.on('slid.bs.carousel', function() { 
       toggleCaption(); 
      }); 
     } 
    }); 

    //MOVED function outside of document.ready: 
    function toggleCaption() { 
     jQuery('.carousel-caption').hide(); 
     var caption = carouselContainer.find('.active').find('.carousel-caption'); 
     caption.delay(1000).toggle("slide", { direction: 'right' }); 
    } 
</script>

来源

2017-06-19 19:16:37 mjw

如果你正在寻找加快幻灯片的第一负载，你应该看看该位的位置：caption.delay（1000），要么减少1000到200-300加速负载，或者，使延迟持续时间参数传递给toggleCaption（delayLength），并在第一次加载时将其作为较低值传递（第一次加载文档中的第一次调用），在第二次调用时加1000 for .on（'sliding.bs.carousel'）处理程序。灵活。 – mjw

Bootstrap旋转木马的第一张幻灯片的问题

回答

相关问题