title: Make bootstrap carousel bullets slide another carousel
body: <p>Based on the code from codrops from this page: <a href="http://tympanus.net/Development/ItemTransitions/index3.html" rel="nofollow">Codrops article </a>, I wanted to add the product slider into a bootstrap carousel. </p>
  
  <p><a href="http://codepen.io/anon/pen/dYbPWK" rel="nofollow"> I have added a codepen here</a>  </p>
  
  <p>This is the javascript code that makes the bottles animation work: </p>
  
  <pre><code>(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 &lt; itemsCount - 1 ? current + 1 : 0;
      }
      else if( dir === 'prev' ) {
          current = current &gt; 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();  })();
  </code></pre>
  
  <p>Everything is good when I'm using the arrows to go to the next slide, but what I'm trying to accomplish is to make it work with the bullet navigation on the bottom. Right now the bullet navigation only moves the slides from the bootstrap carousel and I find the code from codrops to be too difficult to understand for me. </p>