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);
        }
    })
});

与bootstrap轮播有关的问题

2 个答案: