Есть две карусельки, нужно чтобы они работали независимо друг от друга, имена разные, но кнопки первой карусельки действуют на вторую, в чём проблема?
<div class="container">
<div class="col-md-8">
<div class="slider_container">
<div class="next_button"><i class="fa fa-angle-right"></i></div>
<div class="prev_button"><i class="fa fa-angle-left"></i></div>
<div class="carousel">
<div class="slide_item"><img src="http://cdn.themis-media.com/media/global/images/library/deriv/908/908825.jpg" alt="alt"></div>
<div class="slide_item"><img src="http://img04.deviantart.net/74e1/i/2015/113/e/f/kylo_ren_by_fredhild-d8qr20r.jpg" alt="alt"></div>
<div class="slide_item"><img src="http://orig01.deviantart.net/a760/f/2015/115/c/e/kylo_ren_by_synsyn82-d8r2w99.jpg" alt="alt"></div>
<div class="slide_item"><img src="http://img1.goodfon.ru/wallpaper/big/6/ae/star-wars-kylo-ren-lazernyy.jpg" alt="alt"></div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="slider_container">
<div class="next_button"><i class="fa fa-angle-right"></i></div>
<div class="prev_button"><i class="fa fa-angle-left"></i></div>
<div class="carousel2">
<div class="slide_item"><img src="http://cdn.themis-media.com/media/global/images/library/deriv/908/908825.jpg" alt="alt"></div>
<div class="slide_item"><img src="http://img04.deviantart.net/74e1/i/2015/113/e/f/kylo_ren_by_fredhild-d8qr20r.jpg" alt="alt"></div>
<div class="slide_item"><img src="http://orig01.deviantart.net/a760/f/2015/115/c/e/kylo_ren_by_synsyn82-d8r2w99.jpg" alt="alt"></div>
<div class="slide_item"><img src="http://img1.goodfon.ru/wallpaper/big/6/ae/star-wars-kylo-ren-lazernyy.jpg" alt="alt"></div>
</div>
</div>
</div>
</div>
</div>
//Каруселька_первая
//Документация: [url]http://owlgraphic.com/owlcarousel/[/url]
var owl = $(".carousel");
owl.owlCarousel({
items : 2,
autoHeight : true
});
owl.on("mousewheel", ".owl-wrapper", function (e) {
if (e.deltaY > 0) {
owl.trigger("owl.prev");
} else {
owl.trigger("owl.next");
}
e.preventDefault();
});
$(".next_button2").click(function(){
owl.trigger("owl.next");
});
$(".prev_button2").click(function(){
owl.trigger("owl.prev");
});
//Каруселька_вторая
var owl = $(".carousel2");
owl.owlCarousel({
items : 1,
autoHeight : true
});
owl.on("mousewheel", ".owl-wrapper", function (e) {
if (e.deltaY > 0) {
owl.trigger("owl.prev");
} else {
owl.trigger("owl.next");
}
e.preventDefault();
});
$(".next_button1").click(function(){
owl.trigger("owl.next");
});
$(".prev_button1").click(function(){
owl.trigger("owl.prev");
});
