Question

与 bootstrap 轮播相关的问题

2016-11-19

62

javascript jquery html twitter-bootstrap-3 carousel

我正在使用 bootstrap 轮播，但我需要做一件非常简单的事情。我的轮播位于页面底部，我想坚持轮播的第一张幻灯片，直到用户到达此部分。一旦用户到达该部分，轮播就会开始播放。我不知道如何实现这一点。请帮我出出主意。

提前谢谢！

Answer 1

根据 http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

The .slide class adds a CSS transition and animation effect, which makes the items slide when showing a new item. Omit this class if you do not want this effect.

因此，您需要做的就是在用户滚动到该元素时添加该类...

例如，对于我上面提到的链接中给出的示例，必须为 id='myCarousel' 的元素赋予 .slide 类。

因此，使用 jquery，代码将如下所示：

$(document).ready(function(){
 $(window).scroll(function(){
  if($(window).scrollTop()>=($("#myCarousel").offset().top){
     $("#myCarousel").addClass("slide");
     //ANYTHING YOU WANT TO DO WHEN THE USER SCROLLS TO YOUR CAROUSEL. 
  }
 })
});


NOTE: CODE NOT TESTED.

您可以这样做。

Answer 2

经过大量的研究，我终于找到了这个解决方案。当我到达特定部分时，我设法回到第一个轮播。（这里是轮播确实存在的部分）

我的代码是：

$(document).ready(function(){
    $(window).scroll(function(){
        console.log($("#myCarousel").offset().top);
        if($(window).scrollTop()>=$("#myCarousel").offset().top-70 && $(window).scrollTop()<2450 )
        {
            var index = $('.slides li').index($('.slides li:first'));
            console.log(index);
            $('.flexslider').data("flexslider").flexAnimate(index);
        }
    })
});