alpha_full/pages/accueil/accueil-M5.caroussel_haut.php

<?php
	$nomFicAppelant = basename(__FILE__);
	// Dossier de stockage des fichiers
	$uploadDir = './Publication/accueil/caroussel/';

	// Création du dossier si non existant
	if (!is_dir($uploadDir)) {
		mkdir($uploadDir, 0777, true);
	}

	// Limites de taille et types de fichiers autorisés
	$maxFileSize = 5 * 1024 * 1024; // 5 Mo
	$allowedTypes = ['jpg', 'jpeg', 'png', 'gif', 'mp4', 'webm'];

	// Gestion de l'ajout de fichiers
	$uploadError = '';
	if (isset($_FILES['media'])) {
		$fileName = basename($_FILES['media']['name']);
		$targetFilePath = $uploadDir . $fileName;
		$fileType = strtolower(pathinfo($targetFilePath, PATHINFO_EXTENSION));

		// Vérification du type de fichier
		if (in_array($fileType, $allowedTypes)) {
			// Vérification de la taille du fichier
			if ($_FILES['media']['size'] <= $maxFileSize) {
				// Vérification et nettoyage du nom du fichier
				$safeFileName = preg_replace('/[^a-zA-Z0-9._-]/', '', $fileName);
				$targetFilePath = $uploadDir . $safeFileName;

				// Téléchargement du fichier
				if (move_uploaded_file($_FILES['media']['tmp_name'], $targetFilePath)) {
					$uploadError = 'Fichier ajouté avec succès. ';
				} else {
					$uploadError = 'Erreur lors du téléchargement du fichier.';
				}
			} else {
				$uploadError = 'Le fichier est trop volumineux. Taille maximale : 5 Mo.';
			}
		} else {
			$uploadError = 'Type de fichier non autorisé. Formats acceptés : jpg, jpeg, png, gif, mp4, webm.';
		}
	}

	// Gestion de la suppression de fichiers
	if (isset($_POST['delete_file'])) {
		$fileToDelete = $uploadDir . $_POST['delete_file'];
		if (file_exists($fileToDelete)) {
			unlink($fileToDelete);
		}
	}

	// Récupération des fichiers dans le dossier
	$mediaFiles = array_diff(scandir($uploadDir), ['.', '..']);
?>


	<style>
		/* Styles du carrousel */
		.carousel-container {
			width: 85%;
			max-width: 800px;
			margin: auto;
			overflow: hidden;
			position: relative;
		}

		.carousel-slides {
			display: flex;
			transition: transform 0.5s ease;
		}

		.carousel-slide {
			min-width: 100%;
			box-sizing: border-box;
		}

		.carousel-slide img, .carousel-slide video {
			width: 100%;
			height: auto;
			max-height: 500px;
		}

/* Positionnement des flèches */
		.carousel-controls {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			pointer-events: none;

		}

		.carousel-control {
			background-color: rgba(0, 0, 0, 0.5);
			color: white;
			padding: 10px;
			cursor: pointer;
			font-size: 30px;
			pointer-events: auto; /* Permet de cliquer sur les flèches */
			z-index: 100; /* Toujours au-dessus du contenu */
			user-select: none;
		}

		/* Correction pour rendre visible les contrôles */
		.carousel-control.prev {
			position: absolute;
			left: 0;
			z-index: 10;
		}

		.carousel-control.next {
			position: absolute;
			right: 0;
			z-index: 10;
		}
		.delete-button {
			margin-top: 10px;
			color: red;
		}

		/* Styles responsives */
		@media (max-width: 768px) {
			.carousel-container {
				max-width: 100%;
			}

			.carousel-control {
				padding: 5px;
				font-size: 24px;
			}

			.carousel-slide img, .carousel-slide video {
				max-height: 300px;
			}
		}

		/* Correction pour rendre visible les contrôles */
		.carousel-control.prev {
			position: absolute;
			left: 0;
			z-index: 10;
		}

		.carousel-control.next {
			position: absolute;
			right: 0;
			z-index: 10;
		}
		#page-container {display:flex;}
	</style>

   <?php
	// Message d'erreur pour le téléchargement -->
	echo '<span style="color: red;"><?= $uploadError ?></span>';

	   if ($_SESSION['isWbAdm']===true && $affMContext === true  ) {
			// <!-- Formulaire pour ajouter des fichiers -->
			echo '<form action="" method="post" enctype="multipart/form-data" >';
				echo '<input type="file" name="media" accept="image/*,video/*" required>';
				echo '<button type="submit" class="btn btn-primary">Ajouter</button>';
			echo '</form>';
		}
	?>
	<!-- Carrousel -->
	<div class="carousel-container">
		<div class="carousel-slides">
			<?php if (!empty($mediaFiles)) : ?>
				<?php foreach ($mediaFiles as $file) : ?>
					<div class="carousel-slide">
						<?php $fileType = pathinfo($file, PATHINFO_EXTENSION); ?>
						<?php if (in_array($fileType, ['jpg', 'jpeg', 'png', 'gif'])) : ?>
							<img src="<?= $uploadDir . $file ?>" alt="Image" />
						<?php elseif (in_array($fileType, ['mp4', 'webm'])) : ?>
							<video controls>
								<source src="<?= $uploadDir . $file ?>" type="video/<?= $fileType ?>">
							</video>
						<?php endif; ?>
							<?php
								 if ($_SESSION['isWbAdm']===true && $affMContext === true  ) {
									// <!-- Formulaire de suppression -->
									echo '<form action="" method="post" >';
										echo '<input type="hidden" name="delete_file" value="<?= $file ?>" >';
										echo '<button type="submit" class="delete-button">Supprimer</button>';
									echo '</form>';
								}
							?>
					</div>
				<?php endforeach; ?>
			<?php else : ?>
				<p>Aucun fichier trouvé</p>
			<?php endif; ?>
		</div>

		<!-- Contrôles du carrousel -->
		<div class="carousel-controls">
			<div class="carousel-control prev">❮</div>
			<div class="carousel-control next">❯</div>
		</div>
	</div>
<!-- </div> -->

<script>
	const slides = document.querySelector('.carousel-slides');
	const slide = document.querySelectorAll('.carousel-slide');
	const prev = document.querySelector('.prev');
	const next = document.querySelector('.next');
	let index = 0;

	function showSlide(i) {
		index += i;
		if (index < 0) {
			index = slide.length - 1;
		} else if (index >= slide.length) {
			index = 0;
		}
		slides.style.transform = 'translateX(' + (-index * 100) + '%)';
	}

	// Défilement automatique toutes les 3 secondes
	setInterval(() => {
		showSlide(1);
	}, 3000);

	// Navigation avec les flèches
	prev.addEventListener('click', () => {
		showSlide(-1);
	});

	next.addEventListener('click', () => {
		showSlide(1);
	});
</script>

<!-- </body>
</html>
 -->