<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Booth Thumbnails </title>
    <link rel="stylesheet" href="css/carousalstyle.css">
</head>
<body>
	<a href="/logout" class="logout-btn">Logout</a>
	<img id="leftPlantImage" src="images/plant.png" alt="Left Plant" class="plant-image">	
<div class="carousel-container">
	<button id="prevBtn" class="carousel-button left" onclick="prevSlide()"></button>
	<!-- <button class="carousel-control" id="prevBtn" onclick="prevSlide()"><span>&lt;</span></button> -->
		<div class="container">
			<h2>Virtual Booth Thumbnails Carousel</h2>
			
			<div id="thumbnailCarousel" class="carousel">
				<div class="carousel-inner" id="thumbnailContainer">
					<!-- Thumbnails will be dynamically added here -->
				</div>
				
				
			</div>
		</div>
	<!-- <button class="carousel-control" id="nextBtn" onclick="nextSlide()"><span>&gt;</span></button> -->
	<button id="nextBtn" class="carousel-button right" onclick="nextSlide()"></button>
	<!-- Pagination display -->
	<div id="paginationDisplay"></div>

</div>
<img id="rightPlantImage" src="images/plant.png" alt="Right Plant" class="plant-image">

<script src="js/carousal.js"></script>

</body>
</html>
