与bootstrap轮播有关的问题

Question

我正在使用bootstrap轮播，但我需要一个非常简单的事情。 我的旋转木马放在页面的底部，我想坚持旋转木马的第一张幻灯片，直到用户到达此部分。 一旦用户到达该部分，旋转木马将开始播放。 我不知道如何实现这一目标。 请帮助我提出想法。

提前致谢！

Answer 1

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

.slide类添加了CSS过渡和动画效果，这使得项目在显示新项目时会滑动。 如果您不想要此效果，请省略此类。

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

就像在上面提到的链接上给出的例子一样，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);
        }
    })
});