光滑的多个轮播和控件问题

Question

我在选项卡下的一页中有3个轮播。轮播工作正常。但是所有控件都附加到第一个轮播div上。第一个轮播控件div具有3个上一个按钮和3个下一个按钮。其他轮播控件没有任何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>

如何为每个轮播单独获取控件？