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)