Olá, preciso colocar no meu site um carrossel de mapas (3 mapas), porém só posso usar um iframe no HTML e habilitar os botões e mapas no JavaScript. Eu tinha conseguido com vários iframes, mas agora com um só não consigo acessar o array com os src. Os botões também precisam ficar habilitados e desabilitados quando em uso. Alguém consegue ver onde está o problema? Obrigada!
HTML
<section>
<div class="card">
<h1>Cities</h1>
<p class="text-basic-bold">
Texto de introdução....
</p>
<div class="image-gallery">
<iframe
src=""
id="ifr"
class="mapsgoogle active"
width="400"
height="400"
style="border: 0"
></iframe>
</div>
<div>
<button disabled class="btn prev">Previous</button>
<button class="btn next">Next</button>
</div>
</div>
<script src="/js/maps.js"></script>
</section>
JS
const url1 = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d390647.9280928583!2d-46.86880288324416!3d-23.615623282771313!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce448183a461d1%3A0x9ba94b08ff335bae!2sS%C3%A3o%20Paulo%2C%20SP%2C%20Brasil!5e0!3m2!1spt-BR!2sil!4v1663024275611!5m2!1spt-BR!2sil";
const url2 = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d108294.02839134622!2d34.72206017562007!3d31.98290820797056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502b43827ab66ff%3A0x17bcc54a571a7ab8!2sRishon%20LeZion!5e0!3m2!1spt-BR!2sil!4v1663024230349!5m2!1spt-BR!2sil";
const url3 = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d126419.91594417629!2d-35.01772353104882!3d-8.037811846412206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7ab196f88c446e5%3A0x3c9ef52922447fd4!2sRecife%20-%20PE%2C%20Brasil!5e0!3m2!1spt-BR!2sil!4v1663024125396!5m2!1spt-BR!2sil";
const urls = [url1, url2, url3];
let currentlySelected = 0;
nodes = document.getElementById("ifr").setAttribute('src', urls[currentlySelected])
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
function previous() {
nextBtn.disabled = false;
nodes.classList.remove("active");
currentlySelected--;
nodes.classList.add("active");
if (currentlySelected === 0) {
prevBtn.disabled = true;
}
}
function next() {
prevBtn.disabled = false;
nodes.classList.remove("active");
currentlySelected++;
nodes.classList.add("active");
if (currentlySelected + 1 === nodes.length) {
nextBtn.disabled = true;
}
}
function init() {
prevBtn.addEventListener("click", function() {
previous();
});
nextBtn.addEventListener("click", function() {
next();
});
}
init();