Bootstrap carousel conflict flexslider

Question

Я использовал карусель Bootstrap. Если в элементе будет включен flex-слайдер, слайдер flex не работает. Если я удалю bootstrap.js, работает слайдер flex. Но карусель не работает.

HTML:

<div class="carousel-inner"> 
<div class="item active">img here</div> 
<div class="item">img here</div> 
<div> 
<div class="flexslider"> 
    <ul class="slides"> 
    <li> img here</li> 
    <li>img here</li> 
</ul> 
</div> 
</div> 
</div> 



Script: 
    $('.flexslider').flexslider({ 
    animation: "slide" 
    }); 

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

Answer 1

Flexslider 2.2 работает с jQuery 1.7 Вам необходимо скачать jquery.flexslider-min.js и flexslider.css с . Затем включите следующую JavaScript на странице:

<script type="text/javascript"> 
$(window).load(function() { 
// The slider being synced must be initialized first 
$('#carousel').flexslider({ 
animation: "slide", 
controlNav: false, 
animationLoop: false, 
slideshow: false, 
itemWidth: 210, 
itemMargin: 5, 
asNavFor: '#slider' 
}); 

$('#slider').flexslider({ 
animation: "slide", 
controlNav: false, 
animationLoop: false, 
slideshow: false, 
sync: "#carousel" 
}); 
}); 
</script> 

тогда ваш HTML должен быть в этой структуре:

<div id="slider" class="flexslider"> 
<ul class="slides"> 
<li> 
    <img src="slide1.jpg" /> 
</li> 
<li> 
    <img src="slide2.jpg" /> 
</li> 
<li> 
    <img src="slide3.jpg" /> 
</li> 
<li> 
    <img src="slide4.jpg" /> 
</li> 

</ul> 
</div> 

<div id="carousel" class="flexslider"> 
<ul class="slides"> 
<li> 
    <img src="slide1.jpg" /> 
</li> 
<li> 
    <img src="slide2.jpg" /> 
</li> 
<li> 
    <img src="slide3.jpg" /> 
</li> 
<li> 
    <img src="slide4.jpg" /> 
</li> 
</ul> 
</div>