使自举轮播子弹滑动另一个轮播

Question

Based on the code from codrops from this page: Codrops article , I wanted to add the product slider into a bootstrap carousel.

I have added a codepen here

This is the javascript code that makes the bottles animation work:

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

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.

Answer 1

Here is a very simplified version of what you're trying to do

 $('#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>