我如何同步这两个引导转盘？
因此，我正在尝试同步两个引导4传送带，如下图所示：
carousels
我需要指示器和箭头图标同时显示左侧和右侧的内容，但我似乎无法解决这一问题。有人能帮帮我吗？
我不知道如何开始编写代码，我在JavaScript和JQuery方面是新手。这里的想法是展示各种主题的文本和视频。如果有人能帮我一把，我将不胜感激。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"><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>解决方案
您需要来自JS的帮助...我们基于在不同旋转木马上的类似控件的点击来触发在一个旋转木马上的相同控件……
还在第二张幻灯片上插入了横向/纵向图像：)
工作片段如下：
数据-lang="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>相关文章