Estoy tratando de hacer un carrusel automático usando los datos de una API. No sabré cuántos elementos hay para mostrar, ya que eso dependerá de la búsqueda del usuario. Hasta ahora he logrado crear una página que hojea la información cada 5 segundos, pero ¿hay alguna manera de crear un efecto que muestre los datos antiguos deslizándose hacia un lado mientras que los datos nuevos se deslizan desde el otro lado?

Aquí está mi código:

 document.querySelector('button').addEventListener('click', findDrink) let counter = 0 function findDrink() { let drinkName = document.querySelector('input').value; fetch(`https://thecocktaildb.com/api/json/v1/1/search.php?s=${drinkName}`) .then(data => data.json()) .then(item => { document.querySelector('h2').innerText = item.drinks[counter].strDrink; document.querySelector('img').src = item.drinks[counter].strDrinkThumb; document.querySelector('h3').innerText = item.drinks[counter].strInstructions; let length = item.drinks.length if (counter > length - 2) { counter = 0; } else { counter += 1 } }) } setInterval(findDrink, 5000)