bootstrap carousel problems when two slide in the same page -
when use multiple or 2 bootstrap carousel in same page, cause problem. first prev , next button control 2 bootstrap carousel slides , 1 prev , next not work. how solve?? or need change 1 use option??
<div class="container"> <div class="row"> <div class="inner-box relative"> <h2 class="title-2">your interested items <a id="nextitem" class="link pull-right carousel-nav"> <i class="icon-right-open-big"></i></a> <a id="previtem" class="link pull-right carousel-nav"> <i class="icon-left-open-big"></i> </a> </h2> <div class="row"> <div class="col-lg-12"> <div class="no-margin item-carousel owl-carousel owl-theme"> <div class="item">................. ........................................... <div class="container"> <div class="row"> <div class="inner-box relative"> <h2 class="title-2">your interested items <a id="nextitem" class="link pull-right carousel-nav"> <i class="icon-right-open-big"></i></a> <a id="previtem" class="link pull-right carousel-nav"> <i class="icon-left-open-big"></i> </a> </h2> <div class="row"> <div class="col-lg-12"> <div class="no-margin item-carousel owl-carousel owl-theme"> <div class="item">................. ...........................................
you might need change href
of prev
, next
targeting parent carousel
. href value how bootstrap determines slide. need change following:
<a class="carousel-control left" href="#carousel-1" data-slide="prev">‹</a> <a class="carousel-control right" href="#carousel-1" data-slide="next">›</a>
and second carousel:
<a class="carousel-control left" href="#carousel-2" data-slide="prev">‹</a> <a class="carousel-control right" href="#carousel-2" data-slide="next">›</a>
Comments
Post a Comment