Несколько Целей Данных для Bootstrap 4 Карусель Кнопка

Question

Я использую Bootstrap 4 для создания 2 каруселей изображений рядом с внешним элементом div, содержащим кнопки контроллера под ними. Цель состоит в том, чтобы одна карусель содержала фотографии «до», а другая содержала фотографии «после» с одним набором кнопок контроллера, управляющих слайдами обеих каруселей. Таким образом, если пользователь нажимает «04» (например) в блоке контроллера, обе карусели будут одновременно перемещаться к этому конкретному слайду.

Я читал, что Bootstrap позволяет вам вводить несколько целей данных, но по какой-то причине он не будет работать для меня. Кнопки контроллера работают по назначению, когда они нацелены только на одну карусель, но всякий раз, когда я пытаюсь добавить второй идентификатор карусели, она перестает работать. Это метод, который я пытался использовать: data-target = "# first-carousel, # second-carousel"

Пример кода:

<div class="interior-column">
        <div id="first-carousel" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item gallery-slide gallery-slide-before-one active"></div>
            <div class="carousel-item gallery-slide gallery-slide-before-two"></div>
            <div class="carousel-item gallery-slide gallery-slide-before-three"></div>
          </div>
        </div>
      </div>

      <div class="interior-column">
        <div id="second-carousel" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item gallery-slide gallery-slide-after-one active"></div>
            <div class="carousel-item gallery-slide gallery-slide-after-two"></div>
            <div class="carousel-item gallery-slide gallery-slide-after-three"></div>
          </div>
        </div>
      </div>

      <div class="row">
        <div id="external-controls" class="col-auto " role="group" aria-label="External carousel buttons">
          <button class="btn btn-primary" data-target="#first-carousel,#second-carousel" data-slide-to="0" type="button">01</button>
          <button class="btn btn-primary" data-target="#first-carousel,#second-carousel" data-slide-to="1" type="button">02</button>
          <button class="btn btn-primary" data-target="#first-carousel,#second-carousel" data-slide-to="2" type="button">03</button>
        </div>
      </div>

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

Спасибо!