如何解决OWL-Carousel，将 HTML 更改为 javascript，轮播继续工作
我正在对客户的页面进行更改。它有 5 个选项卡，当用户选择时，会显示与他点击的内容相关的目的地。
我必须使用 OWL 轮播，因为这是我老板想要的。
所以我编写了代码来保存所有的 html、所有的幻灯片。当用户单击这些选项卡之一时，他会调用一个传递数据集值的函数，检查哪些已保存的幻灯片具有此值并将其插入到具有 owl-carousel 类的 div 中。但是，当我这样做时，它停止工作。
我尝试用一个新类重新编写代码，但它也不起作用。
有人做过类似的事情吗？
HTML
<div id="acmance_blackSpace_secondCarousel">
<div id="acmance_blackSpace_secondCarousel_plans">
<div class="acmance_blackSpace_secondCarousel_plans_inputLabelText">
<input type="radio" id="acmance_blackSpace_secondCarousel_plans1000" name="acmance_blackSpace_secondCarousel_plans" data-plans="1000" checked>
<label for="acmance_blackSpace_secondCarousel_plans1000">Plano 1000</label>
<div class="acmance_blackSpace_secondCarousel_plan">
Veja os destinos que você pode curtir a partir de 4.200 milhas o trecho
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_plans_inputLabelText">
<input type="radio" id="acmance_blackSpace_secondCarousel_plans2000" name="acmance_blackSpace_secondCarousel_plans" data-plans="2000">
<label for="acmance_blackSpace_secondCarousel_plans2000">Plano 2000</label>
<div class="acmance_blackSpace_secondCarousel_plan">
Veja os destinos que você pode curtir a partir de 10.000 milhas o trecho
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_plans_inputLabelText">
<input type="radio" id="acmance_blackSpace_secondCarousel_plans5000" name="acmance_blackSpace_secondCarousel_plans" data-plans="5000">
<label for="acmance_blackSpace_secondCarousel_plans5000">Plano 5000</label>
<div class="acmance_blackSpace_secondCarousel_plan">
Veja os destinos que você pode curtir a partir de 20.000 milhas o trecho
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_plans_inputLabelText">
<input type="radio" id="acmance_blackSpace_secondCarousel_plans7000" name="acmance_blackSpace_secondCarousel_plans" data-plans="7000">
<label for="acmance_blackSpace_secondCarousel_plans7000">Plano 7000</label>
<div class="acmance_blackSpace_secondCarousel_plan">
Veja os destinos que você pode curtir a partir de 30.000 milhas o trecho
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_plans_inputLabelText">
<input type="radio" id="acmance_blackSpace_secondCarousel_plans10000" name="acmance_blackSpace_secondCarousel_plans" data-plans="10000">
<label for="acmance_blackSpace_secondCarousel_plans10000">Plano 10000</label>
<div class="acmance_blackSpace_secondCarousel_plan">
Veja os destinos que você pode curtir a partir de 40.000 milhas o trecho
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_plans_inputLabelText">
<input type="radio" id="acmance_blackSpace_secondCarousel_plans20000" name="acmance_blackSpace_secondCarousel_plans" data-plans="20000">
<label for="acmance_blackSpace_secondCarousel_plans20000">Plano 20000</label>
<div class="acmance_blackSpace_secondCarousel_plan">
Veja os destinos que você pode curtir a partir de 50.000 milhas o trecho
</div>
</div>
</div>
<div id="acmance_blackSpace_secondCarousel_slider" class="owl-carousel owl-theme">
<div class="acmance_blackSpace_secondCarousel_slide" data-plans="1000">
<div class="acmance_blackSpace_secondCarousel_img">
<img src="https://smiles-mkt.s3.amazonaws.com/A%C3%A7%C3%B5es%20Performance/thirdCarousel/fernandonoronha.png"
alt="Natal">
<div class="acmance_blackSpace_secondCarousel_img_text">
<div>
Veja os destinos que você pode curtir a partir de 50.000 milhas o trecho
</div>
<div>
O trecho a partir de
<span>3.000 pontos</span>
</div>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_text">
<h3>
Natal
</h3>
<p>
pode escolher entre as dunas de
</p>
<button>
<a href="">
Veja mais
</a>
</button>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_slide" data-plans="1000">
<div class="acmance_blackSpace_secondCarousel_img">
<img src="https://smiles-mkt.s3.amazonaws.com/A%C3%A7%C3%B5es%20Performance/thirdCarousel/fernandonoronha.png"
alt="Florianópolis">
<div class="acmance_blackSpace_secondCarousel_img_text">
<div>
Veja os destinos que você pode curtir a partir de 50.000 milhas o trecho
</div>
<div>
O trecho a partir de
<span>3.000 pontos</span>
</div>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_text">
<h3>
Florianópolis
</h3>
<p>
Ou o charme da Ilha da Magia
</p>
<button>
<a href="">
Veja mais
</a>
</button>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_slide" data-plans="2000">
<div class="acmance_blackSpace_secondCarousel_img">
<img src="https://smiles-mkt.s3.amazonaws.com/A%C3%A7%C3%B5es%20Performance/thirdCarousel/fernandonoronha.png"
alt="Salvador">
<div class="acmance_blackSpace_secondCarousel_img_text">
<div>
Veja os destinos que você pode curtir a partir de 50.000 milhas o trecho
</div>
<div>
O trecho a partir de
<span>3.000 pontos</span>
</div>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_text">
<h3>
Salvador
</h3>
<p>
pode escolher entre a Capital da Alegria
</p>
<button>
<a href="">
Veja mais
</a>
</button>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_slide" data-plans="2000">
<div class="acmance_blackSpace_secondCarousel_img">
<img src="https://smiles-mkt.s3.amazonaws.com/A%C3%A7%C3%B5es%20Performance/thirdCarousel/fernandonoronha.png"
alt="Foz do Iguaçu">
<div class="acmance_blackSpace_secondCarousel_img_text">
<div>
Veja os destinos que você pode curtir a partir de 50.000 milhas o trecho
</div>
<div>
O trecho a partir de
<span>3.000 pontos</span>
</div>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_text">
<h3>
Foz do Iguaçu
</h3>
<p>
Ou a terra das Cataratas
</p>
<button>
<a href="">
Veja mais
</a>
</button>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_slide" data-plans="5000">
<div class="acmance_blackSpace_secondCarousel_img">
<img src="https://smiles-mkt.s3.amazonaws.com/A%C3%A7%C3%B5es%20Performance/thirdCarousel/fernandonoronha.png"
alt="Buenos Aires">
<div class="acmance_blackSpace_secondCarousel_img_text">
<div>
Veja os destinos que você pode curtir a partir de 50.000 milhas o trecho
</div>
<div>
O trecho a partir de
<span>3.000 pontos</span>
</div>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_text">
<h3>
Buenos Aires
</h3>
<p>
Que tal conhecer a Paris da América do Sul
</p>
<button>
<a href="">
Veja mais
</a>
</button>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_slide" data-plans="5000">
<div class="acmance_blackSpace_secondCarousel_img">
<img src="https://smiles-mkt.s3.amazonaws.com/A%C3%A7%C3%B5es%20Performance/thirdCarousel/fernandonoronha.png"
alt="Montevidéu">
<div class="acmance_blackSpace_secondCarousel_img_text">
<div>
Veja os destinos que você pode curtir a partir de 50.000 milhas o trecho
</div>
<div>
O trecho a partir de
<span>3.000 pontos</span>
</div>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_text">
<h3>
Montevidéu
</h3>
<p>
Ou se esbaldar com o charme e a cultura de
</p>
<button>
<a href="">
Veja mais
</a>
</button>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_slide" data-plans="7000">
<div class="acmance_blackSpace_secondCarousel_img">
<img src="https://smiles-mkt.s3.amazonaws.com/A%C3%A7%C3%B5es%20Performance/thirdCarousel/fernandonoronha.png"
alt="Lima (Peru)">
<div class="acmance_blackSpace_secondCarousel_img_text">
<div>
Veja os destinos que você pode curtir a partir de 50.000 milhas o trecho
</div>
<div>
O trecho a partir de
<span>3.000 pontos</span>
</div>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_text">
<h3>
Lima (Peru)
</h3>
<p>
Que tal uma visita na Cidade dos Reis
</p>
<button>
<a href="">
Veja mais
</a>
</button>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_slide" data-plans="7000">
<div class="acmance_blackSpace_secondCarousel_img">
<img src="https://smiles-mkt.s3.amazonaws.com/A%C3%A7%C3%B5es%20Performance/thirdCarousel/fernandonoronha.png"
alt="Mendoza (Argentina)">
<div class="acmance_blackSpace_secondCarousel_img_text">
<div>
Veja os destinos que você pode curtir a partir de 50.000 milhas o trecho
</div>
<div>
O trecho a partir de
<span>3.000 pontos</span>
</div>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_text">
<h3>
Mendoza (Argentina)
</h3>
<p>
Ou preparar um roteiro pelas vinícolas de
</p>
<button>
<a href="">
Veja mais
</a>
</button>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_slide" data-plans="10000">
<div class="acmance_blackSpace_secondCarousel_img">
<img src="https://smiles-mkt.s3.amazonaws.com/A%C3%A7%C3%B5es%20Performance/thirdCarousel/fernandonoronha.png"
alt="Cancún">
<div class="acmance_blackSpace_secondCarousel_img_text">
<div>
Veja os destinos que você pode curtir a partir de 50.000 milhas o trecho
</div>
<div>
O trecho a partir de
<span>3.000 pontos</span>
</div>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_text">
<h3>
Cancún
</h3>
<p>
Um roteiro nas praias paradisíacas de
</p>
<button>
<a href="">
Veja mais
</a>
</button>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_slide" data-plans="10000">
<div class="acmance_blackSpace_secondCarousel_img">
<img src="https://smiles-mkt.s3.amazonaws.com/A%C3%A7%C3%B5es%20Performance/thirdCarousel/fernandonoronha.png"
alt="Nova Iorque">
<div class="acmance_blackSpace_secondCarousel_img_text">
<div>
Veja os destinos que você pode curtir a partir de 50.000 milhas o trecho
</div>
<div>
O trecho a partir de
<span>3.000 pontos</span>
</div>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_text">
<h3>
Nova Iorque
</h3>
<p>
Ou conhecer a Capital do Mundo
</p>
<button>
<a href="">
Veja mais
</a>
</button>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_slide" data-plans="20000">
<div class="acmance_blackSpace_secondCarousel_img">
<img src="https://smiles-mkt.s3.amazonaws.com/A%C3%A7%C3%B5es%20Performance/thirdCarousel/fernandonoronha.png"
alt="Punta Cana">
<div class="acmance_blackSpace_secondCarousel_img_text">
<div>
Veja os destinos que você pode curtir a partir de 50.000 milhas o trecho
</div>
<div>
O trecho a partir de
<span>3.000 pontos</span>
</div>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_text">
<h3>
Punta Cana
</h3>
<p>
Aproveitar um resort luxuoso em
</p>
<button>
<a href="">
Veja mais
</a>
</button>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_slide" data-plans="20000">
<div class="acmance_blackSpace_secondCarousel_img">
<img src="https://smiles-mkt.s3.amazonaws.com/A%C3%A7%C3%B5es%20Performance/thirdCarousel/fernandonoronha.png"
alt="Lisboa">
<div class="acmance_blackSpace_secondCarousel_img_text">
<div>
Veja os destinos que você pode curtir a partir de 50.000 milhas o trecho
</div>
<div>
O trecho a partir de
<span>3.000 pontos</span>
</div>
</div>
</div>
<div class="acmance_blackSpace_secondCarousel_text">
<h3>
Lisboa
</h3>
<p>
Ou um tour pelos castelos de
</p>
<button>
<a href="">
Veja mais
</a>
</button>
</div>
</div>
</div>
</div>
JS
// $("#acmance_blackSpace_secondCarousel_slider").owlCarousel({
// margin: 0,// items: 1,// })
function secondCarousel() {
let inputs = document.querySelectorAll("#acmance_blackSpace #acmance_blackSpace_secondCarousel .acmance_blackSpace_secondCarousel_plans_inputLabelText input");
let slider = document.querySelector("#acmance_blackSpace #acmance_blackSpace_secondCarousel #acmance_blackSpace_secondCarousel_slider")
let slides = document.querySelectorAll("#acmance_blackSpace #acmance_blackSpace_secondCarousel .acmance_blackSpace_secondCarousel_slide")
let plans = ["1000","2000","5000","7000","10000","20000"]
let html = [];
inputs.forEach(element => {
element.addEventListener("click",e => {
showSlides(element.dataset.plans)
})
});
// Take all slides
function getHtml() {
for (let i = 0; i < slides.length; i++) {
html[i] = slides[i];
}
}getHtml()
// Show slides from plan 1000
// showSlides(1000)
// Show slides
function showSlides(plan){
slider.innerHTML = "";
for (let i = 0; i < plans.length; i++) {
if(slider.classList.contains(`owl-carousel-${plans[i]}`)){
slider.classList.remove(`owl-carousel-${plans[i]}`)
}
}
for (let i = 0; i < html.length; i++) {
if(html[i].dataset.plans == plan){
slider.appendChild(html[i]);
slider.classList.add(`owl-carousel-${plan}`);
console.log(slider.classList)
}
}
$(`.owl-carousel-${plan}`).owlCarousel({
margin: 0,items: 1,})
}
}secondCarousel()
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
