Estoy trabajando en controles deslizantes de carrusel ubicados en pestañas de acordeón usando bootstrap 5 y flickity. Tengo siete pestañas de acordeón. Cada pestaña de acordeón contiene un control deslizante de carrusel con videos de reproducción automática. funciona muy bien el video de reproducción automática en el primer carrusel de acordeón, pero solo funciona en la primera pestaña de acordeón, no sé cómo hacer que funcione en las demás pestañas de acordeón, estaba pensando en crear una matriz de identificación pero esta idea no funcionó , también intenté usar document.querySelectAll() con todas las identificaciones de las pestañas, pero tampoco funcionó. El script para hacer que el primer acordeón de pestañas funcione con carrusel es este.

 (function(){ const target1 = document.getElementById('flickity1'); const videos = target1.getElementsByTagName('video'); const videosLength = videos.length;

//inicia el primer video en el carrusel

 videos[0].play(); const flickity = new Flickity(target1,{ wrapAround:false, autoPlay:false, on: { ready: function() { console.log('Flickity ready'); videos[0].play(); } } }); flickity.on('settle',changeSlide); function changeSlide(index) { for(let i = 0;i < videosLength; i++){ videos[i].currentTime = 0; videos[index].play(); } } }());

Una solución que encontré es repetir para los diferentes ID el mismo script pero cambiando la variable de nombre, por ejemplo, const target2 = document.getElementById('flickity2'); y así sucesivamente... Pero esta no es la forma correcta de hacerlo. Creo que una matriz puede funcionar. algo como esto:

 var ids = ['flickity0', 'flickity1']; function accorcarousel() { for (var i = 0; i<ids.length; i++){ document.getElementById(ids[i]) = target1;}}

Estaba leyendo los documentos de arranque que puedo activar la función a través de atributos de datos. data-bs-toggle="collapse" y data-bs-target al elemento para asignar automáticamente el control de uno o más elementos colapsables. Cualquier idea es muy apreciada.