Как я могу синхронизировать c эти две bootstrap карусели? - PullRequest
Новая
       27

Как я могу синхронизировать c эти две bootstrap карусели?

0 голосов
/ 26 апреля 2020

Итак, я пытаюсь синхронизировать c две bootstrap 4 карусели, согласно изображению ниже: карусели

Мне нужны оба индикатора и значки со стрелками, чтобы показать содержание левой и правой стороны одновременно, но я не могу понять это. Кто-нибудь может мне помочь?

Я понятия не имею, как начать кодирование, я новичок ie в 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>

1 Ответ

0 голосов
/ 26 апреля 2020

Вам понадобится помощь от 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>
...