我如何同步这两个引导转盘？ [英] How can I sync this two bootstrap 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>这篇关于我如何同步这两个引导转盘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
