<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel Preview</title>
<style>
.carousel {
display: flex;
overflow: hidden;
width: 440px;
}
.carousel-card {
margin-right: 10px;
}
.carousel img {
width: 440px;
height: 440px;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<!-- Carousel items will go here -->
</div>
<script>
// The JSON you provided (for simplicity, here's a small snippet)
const adData = {
"carouselInfo": {
"cards": [
{
"cardTitle": "The Freelancer",
"cardImageXCloudinaryUrl": "https://brand-img1.hotstarext.com/image/upload/v1693999460/YR/The-Freelancer-KV-5_Catalog_440-X440.jpg"
},
{
"cardTitle": "Hotstar Specials",
"cardImageXCloudinaryUrl": "https://brand-img1.hotstarext.com/image/upload/v1693999459/YR/The-Freelancer-KV-4_Catalog_440-X440.jpg"
},
{
"cardTitle": "Live Now",
"cardImageXCloudinaryUrl": "https://brand-img1.hotstarext.com/image/upload/v1693999454/YR/The_Freelancer_KV_2_Catalog_440-X440.jpg"
},
{
"cardTitle": "On Disney+Hotstar",
"cardImageXCloudinaryUrl": "https://brand-img1.hotstarext.com/image/upload/v1693999448/YR/The-Freelancer-KV-3_Catalog_440-X440.jpg"
}
]
}
};
const carousel = document.getElementById('carousel');
// Generate carousel cards based on the data
adData.carouselInfo.cards.forEach(card => {
const cardElement = document.createElement('div');
cardElement.classList.add('carousel-card');
cardElement.innerHTML = `
<img src="${card.cardImageXCloudinaryUrl}" alt="${card.cardTitle}">
<h3>${card.cardTitle}</h3>
`;
carousel.appendChild(cardElement);
});
</script>
</body>
</html>
6
2
577KB
577KB
116.0ms
150.0ms
517.0ms