I am trying to make an automatic carousel using the data from an API. I won't know how many elements there are to display as that will depend on the search from the user. I have so far managed to create a page which flicks through the information every 5 seconds, but is there a way to create an effect which shows the old data sliding to one side while the new data slides from the other side?

Here's my code:

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)