如何同步这两个bootstrap转盘？

Question

所以，我想同步两个bootstrap 4的转盘，根据下面的图片。旋转木马

我需要指示灯和箭头图标同时显示左右两边的内容，但我似乎无法解决。谁能帮帮我？

我不知道如何开始编码，我是JavaScript和JQuery的新手。而这里的想法是显示一个文本和一个视频的各种主题。如果有人能帮我一把，我会非常感激。

<div class="categorias_content">
                  <div class="left_side">
                     <div id="carouselSite" class="carousel slide" data-ride="carousel" data-interval="false">
                        <ol class="carousel-indicators">
                           <li data-target="#carouselSite" data-slide-to="0" class="active"></li>
                           <li data-target="#carouselSite" data-slide-to="1"></li>
                           <li data-target="#carouselSite" data-slide-to="2"></li>
                           <li data-target="#carouselSite" data-slide-to="3"></li>
                           <li data-target="#carouselSite" data-slide-to="4"></li>
                           <li data-target="#carouselSite" data-slide-to="5"></li>
                        </ol>
                        <div class="carousel-inner">
                           <div class="carousel-item active">
                              <h2>Inteligência artificial que<br>cuida da sua saúde</h2>
                              <p>Uma assistente virtual que avalia seu perfil e te dá sugestões de check-ups personalizados, alertas de consultas, medicamentos e dicas sobre como manter sua saúde em dia.</p>
                           </div>
                           <div class="carousel-item">
                              <h2>Medicamentos com até<br>60% de desconto</h2>
                              <p>É só acessar o aplicativo pelo celular, pesquisar o medicamento e pegar o desconto em mais de 20.000 farmácias espalhadas pelo Brasil.</p>
                           </div>
                           <div class="carousel-item">
                              <h2>Agende consultas médicas<br>e exames com desconto.</h2>
                              <p>Tenha acesso a um preço imbatível em consultas, exames, vacinas, procedimentos estéticos, homecare, cirurgias e muito mais.</p>
                           </div>
                           <div class="carousel-item">
                              <h2>Programa completo de nutrição e fitness</h2>
                              <p>Emagrecer ou ganhar massa muscular ficou mais fácil.<br>No Clude você também tem um nutricionista e um personal trainer online na palma da sua mão.</p>
                           </div>
                           <div class="carousel-item">
                              <h2>Orientação médica e farmacêutica 24h</h2>
                              <p>Esclareça dúvidas sobre sinais e sintomas diretamente com um médico sem precisar sair de casa.</p>
                           </div>
                           <div class="carousel-item">
                              <h2>Vídeo orientação médica<br>por apenas R$ 35<strong>*</strong></h2>
                              <p>No Clude, você também pode conversar com um médico quando precisar através da vídeo orientação por um valor acessível. <em>*Valor de março/2020. Sujeito a alterações.</em></p>
                           </div>
                           
                           <button class="btn-large--roxo">Saiba mais sobre o Clude Saúde</button>                        
                        </div>
                     </div>
                  </div>
                  <div class="right_side">
                     <a class="carousel-control-prev" href="#carouselCelular" role="button" data-slide="prev">
                        <img src="./img/icons/left-arrow.svg" alt="">
                        <span class="sr-only">Previous</span>
                     </a>
                     <div class="celular">
                        <div class="celular_carousel">
                           <div id="carouselCelular" class="carousel slide" data-ride="carousel"  data-interval="false">
                              <div class="carousel-inner">
                                 <div class="carousel-item active">
                                    <h1>Hello</h1>
                                 </div>
                                 <div class="carousel-item">
                                    <h1>Darling</h1>
                                 </div>
                                 <div class="carousel-item">
                                    <h1>Will</h1>
                                 </div>
                                 <div class="carousel-item">
                                    <h1>This</h1>
                                 </div>
                                 <div class="carousel-item">
                                    <h1>Finally</h1>
                                 </div>
                                 <div class="carousel-item">
                                    <h1>Work?</h1>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <a class="carousel-control-next" href="#carouselCelular" role="button" data-slide="next">
                        <img src="./img/icons/right-arrow.svg" alt="">
                        <span class="sr-only">Next</span>
                     </a>   
                  </div>
               </div>
            </div>

Answer 1

你需要JS的帮助，... 我们根据不同转盘上类似控件的点击，触发一个转盘上的同一个控件...

在第二张幻灯片上也插入了一个风景肖像图片:)

工作片段 下面是：

$(document).ready(() => {
  $("#demo2 .carousel-control-prev").click(() => {
    $("#demo .carousel-control-prev").trigger('click');
  });
  $("#demo2 .carousel-control-next").click(() => {
    $("#demo .carousel-control-next").trigger('click');
  });

  $("#d1one").click(() => {
    $("#d2one").trigger('click');
  });
  $("#d1two").click(() => {
    $("#d2two").trigger('click');
  });
  $("#d1three").click(() => {
    $("#d2three").trigger('click');
  });

});

body {
  display: flex;
}

#demo,
#demo2 {
  width: 50vw;
}

.carousel-inner img {
  width: 100%;
  height: 100%;
}

#demo .carousel-control-prev,
#demo .carousel-control-next,
#demo2 .carousel-indicators {
  display: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

</head>

<body>

  <div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">

    <!-- Indicators -->
    <ul class="carousel-indicators">
      <li id='d1one' data-target="#demo" data-slide-to="0" class="active"></li>
      <li id='d1two' data-target="#demo" data-slide-to="1"></li>
      <li id='d1three' data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- The slideshow -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
      </div>
      <div class="carousel-item">
        <img src="https://www.akberiqbal.com/Jumbo.jpg" alt="Chicago" width="1100" height="500">
      </div>
      <div class="carousel-item">
        <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>

  </div>

  <div id="demo2" class="carousel slide" data-ride="carousel" data-interval="false">

    <!-- Indicators -->
    <ul class="carousel-indicators">
      <li id='d2one' data-target="#demo2" data-slide-to="0" class="active"> </li>
      <li id='d2two' data-target="#demo2" data-slide-to="1"></li>
      <li id='d2three' data-target="#demo2" data-slide-to="2"></li>
    </ul>

    <!-- The slideshow -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
      </div>
      <div class="carousel-item">
        <img src="https://www.akberiqbal.com/JumboMob.jpg" alt="Chicago" width="1100" height="500">
      </div>
      <div class="carousel-item">
        <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#demo2" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo2" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>

  </div>
</body>