I have 3 carousels in one page under tabs. Carousels are working fine. But all the controls are appending to first carousel div. The first carousel-controls div has 3 previous and 3 next buttons. Other carousel-controls doesn't have any html.
$formatter.each(function(key) {
var thisFormatter = $(this);
var carousel = thisFormatter.find('.js-basic-carousel');
var arrowsDiv = thisFormatter.find('.carousel-controls');
//adding arrows like this
appendArrows: arrowsDiv
}
// HTML is appending like this
<div class="carousel-controls">
<button type="button" data-role="none" class="slick-prev slick-arrow"
aria-label="Previous" role="button" style="display:
block;">Previous</button>
<button type="button" data-role="none" class="slick-prev slick-arrow"
aria-label="Previous" role="button" style="display:
block;">Previous</button>
<button type="button" data-role="none" class="slick-prev slick-arrow"
aria-label="Previous" role="button" style="display:
block;">Previous</button>
How can I get controls separately for each carousel?
