Сделать бутстрап карусельной пули слайд другой карусель

Question

На основании кода из codrops с этой страницы: Codrops article, я хотел добавить слайдер продукта в карусель для бутстрапа.

I have added a codepen here

Это Java-код, который делает бутылку анимации работы:

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

Всем это хорошо, когда я использую стрелку, чтобы перейти к следующему слайду, но то, что я попытка выполнить это, чтобы заставить его работать с навигацией по пуле в нижней части. В настоящий момент пулевая навигация только перемещает слайды из карусели бутстрапа, и я считаю, что код из треков слишком сложно понять для меня.

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>