javascript - 使 bootstrap carousel 子弹滑动另一个 carousel

Question

基于本页 codrops 的代码:Codrops article ，我想将产品 slider 添加到 Bootstrap 轮播中。

I have added a codepen here

这是使瓶子动画工作的 javascript 代码:

(function() {
var support = { animations : Modernizr.cssanimations },
    animEndEventNames = {
        'WebkitAnimation' : 'webkitAnimationEnd',
        'OAnimation' : 'oAnimationEnd',
        'msAnimation' : 'MSAnimationEnd',
        'animation' : 'animationend'
    },
    // animation end event name
    animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
    component = document.getElementById( 'products' ),
    items = component.querySelector( 'ul.itemwrap' ).children,
    current = 0,
    itemsCount = items.length,
    navNext = document.getElementById( 'move-right' ),
    navPrev = document.getElementById( 'move-left' ),
    navOne = document.getElementById( 'bullet-sl' )
    isAnimating = false;

function init() {
    navNext.addEventListener( 'click', function( ev ) { ev.preventDefault(); navigate( 'next' ); } );
    navPrev.addEventListener( 'click', function( ev ) { ev.preventDefault(); navigate( 'prev' ); } );
}

function navigate( dir ) {
    if( isAnimating ) return false;
    isAnimating = true;
    var cntAnims = 0;

    var currentItem = items[ current ];

    if( dir === 'next' ) {
        current = current < itemsCount - 1 ? current + 1 : 0;
    }
    else if( dir === 'prev' ) {
        current = current > 0 ? current - 1 : itemsCount - 1;
    }

    var nextItem = items[ current ];

    var onEndAnimationCurrentItem = function() {
        this.removeEventListener( animEndEventName, onEndAnimationCurrentItem );
        classie.removeClass( this, 'current' );
        classie.removeClass( this, dir === 'next' ? 'navOutNext' : 'navOutPrev' );
        ++cntAnims;
        if( cntAnims === 2 ) {
            isAnimating = false;
        }
    }

    var onEndAnimationNextItem = function() {
        this.removeEventListener( animEndEventName, onEndAnimationNextItem );
        classie.addClass( this, 'current' );
        classie.removeClass( this, dir === 'next' ? 'navInNext' : 'navInPrev' );
        ++cntAnims;
        if( cntAnims === 2 ) {
            isAnimating = false;
        }
    }

    if( support.animations ) {
        currentItem.addEventListener( animEndEventName, onEndAnimationCurrentItem );
        nextItem.addEventListener( animEndEventName, onEndAnimationNextItem );
    }
    else {
        onEndAnimationCurrentItem();
        onEndAnimationNextItem();
    }

    classie.addClass( currentItem, dir === 'next' ? 'navOutNext' : 'navOutPrev' );
    classie.addClass( nextItem, dir === 'next' ? 'navInNext' : 'navInPrev' );


}

init();  })();

当我使用箭头转到下一张幻灯片时，一切都很好，但我想要完成的是让它与底部的元素符号导航一起使用。现在，子弹导航只能移动 Bootstrap 轮播中的幻灯片，我发现来自 codrops 的代码对我来说太难理解了。

Answer 1

这是你正在尝试做的事情的一个非常简化的版本

$('#myCarousel').carousel({
  interval: 3000
});

/* SLIDE ON CLICK */

$('.carousel-linked-nav > li > a').click(function() {

  // grab href, remove pound sign, convert to number
  var item = Number($(this).attr('href').substring(1));

  // slide to number -1 (account for zero indexing)
  $('#myCarousel').carousel(item - 1);

  // remove current active class
  $('.carousel-linked-nav .active').removeClass('active');

  // add active class to just clicked on item
  $(this).parent().addClass('active');

  // don't follow the link
  return false;
});

/* AUTOPLAY NAV HIGHLIGHT */

// bind 'slid' function
$('#myCarousel').bind('slide', function() {

  // remove active class
  $('.carousel-linked-nav .active').removeClass('active');

  // get index of currently active item
  var idx = $('#myCarousel .item.active').index();

  // select currently active item and add active class
  $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');

});

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');
 #myCarousel {
  margin-top: 40px;
}
.carousel-linked-nav,
.item img {
  display: block;
  margin: 0 auto;
}
.carousel-linked-nav {
  width: 120px;
  margin-bottom: 20px;
}

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
      <img src="http://tympanus.net/Development/ItemTransitions/img/9.png" alt="" />
    </div>
    <div class="item">
      <img src="http://tympanus.net/Development/ItemTransitions/img/10.png" alt="" />
    </div>
    <div class="item">
      <img src="http://tympanus.net/Development/ItemTransitions/img/11.png" alt="" />
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

<!-- LINKED NAV -->
<ol class="carousel-linked-nav pagination">
  <li class="active"><a href="#1">&#8226;</a>
  </li>
  <li><a href="#2">&#8226;</a>
  </li>
  <li><a href="#3">&#8226;</a>
  </li>
</ol>