
<!--
/***************////////***********/*****/***************/**///*****,,,,.,.,....................,/*////////////////////////////*/////*******//*****//*
//*/////*//*///*///////*******//************************/(/(//*//***,,,,,,........ ...    .........***////********//////////////******/*/***//****///*
*/****///***/////**///**//****//******************,////(#(///////*******,,............        .. ....****//*******/*///////////****///*////**//*/*****
///****//*****////////////***********************//(((##((((//////*****,,,,,..............     . ....,,*/*******///***/*////////**////***//***********
//////*/********//////////**********************(##%%#####(((///*/////***,*,.................  .......,.,..//***//**/**///**/*******//**//*******///**
///////************///////((//*************/****#%%#%%####((((//////*////***,,,,,,,,.................,,.....*//**//******//////**/////**///**///////**
////*****************///////////*******/*******(%&%%%%######((///**///**,*/****,,*,,,.................,,,...*////////****/////////////////////////////
//********************///******************,,,,%%%%%%%##(##((////****//***,**,*,*,,,,,..,...................,//////////**********///**////////////////
/////****//*******//*/*///******************,,##%%%%%%##((/**//***,,*///***/****,,,,,,,,..................,.,/////////**********///****///////////////
///******////*///****************************,##%%%%%%%###((//*****,,,**,,,*****,,,,,,,,,...,...............*//////////***/*****/////**//**///////////
//*******//(///*************/////**,*,,*****,##%%%%%%%##(((((////***,,***,*********,,,,,........,.......,..,*/////////*/***//***/////////****/*///****
////****//***************************,,,,***/##%%%%%%%%##%#/(///##(//*///*//****/***/*,,*,,.,....,,........ ./////////**********/////////**/*///****//
/////////****************************,,,***(%%%%%%%%%&%%%%%&&&&%%%#%%#/**/(///(/((///*((//,*,..,....,........**///*///*//*******////////////***//****/
///******/**/**/********************,,,**,*,##%%%%%%%%%&%&&&&%%@%%%&&&#(*,*(#%%%%###(//*/*****,,,,,...........*/////**////******//////////*//**////***
////*************/**********,**,,,,,,,,*****##%%%%%%&&&@@%%&@@@%@&@@@#/*,.,/(#%#%%%&&&(%#&%#/***,,......  ../(/,/////////***********///////***////***/
///****//**********************,,,,,,,,,,*,*%#%%%%%&&&&%&&%%%####%%&%(*,..,*(((#####(#(//*//(//**,,,.... ..,,(//////////*****//////////////***********
////**************************,,,,,*,,,,,***&%%%%%&&%%%%%%%%####%#%%#**,..,,,**((/*/#(//*,,**,,,,,........*../*//////////**////((////**///////////////
////****//**********************************&%%%%%%%%%%#%%####((%%%%(*,,..,,,,,,**///*******,,,,,..,,,,,.#/*,.*////////***/**//////**/////*/////**/*//
/*********/*********************************%&%%%%%%%%###(#(#((#((#(/*,,...,,,,/*,,,,,,,,,,,,,,,,,,,,,,...//*,,////////*********/*********/*///////***
///*****************************,,***********%&%%%%%%###(#(((#%%%%%#(//*,,,....,((*,,,,,,,,,,,,,,,,,,,,,.*/*,,*////////*/***************///////////**/
/*******************************,,,,,,,******(%%%%%%%%%##(((#%&%%&@%#(((/*(@&(/,/#((/*,,,,,,..,,,,,,,,,,....,,//////////*//**************///****//****
/********/********************,,,,,,,,,,,,**,*&%%%%%%%######%&&&&&&&%%#(/***((*,,*(##//*,,,,,,,,,,,,,,,,.,,.,**///////////////////*///**/////////***/*
/********************////*****,*,,,,,,,,,,,,,,%%%%%%%%%%###%%%%%%%%#(//#//*,,,,,,,*/##(/****,,,,,,,,,,,,,.,.////((///////////**************//*///*****
/**/***********************/****,,,*********,,,%%%%%%%%%##%%%%%%###(***((/*,,,,,,,,*//#(//********,,,,,,*,,////(////////*/**************//************
/**/******/********************,,*******,,,,*,,/%%%%%%%%#%%%%%%%%%%#///(#(//******//(//(///*****,,,,,,,/////////////////*****/******/****/*****/******
*/************//**************,,,,****,,,,,,,,,,%%%%%%%%##%%&&&&&&%%%%%#%#(//*****/%%#(/******,*,,,,,,,/////////////////***/*////*****//***/**//*/****
*/******************************,,**,,,,,,,,,,,,,%%%%%%%##%%&&&%%%##((////**,******/(#(/****,,,*,,,,,,*//////////////*/**//**////*******/******/******
/***********/********************,,,,,,,,,,,,,,,,*%%%%%%##%%%%%%%%%%%%%%%%##((/******///*****,*,,,**,,*///////////************/*/*********************
********************************,,,,,,,*********,@&%%%%%%%%%##((#((//*****,,,,,**,*,,********,*****,,////////////****/********///****************/****
*/*********///****************,,**********///*(@@@@@&%%%%%%%%%###((//******,,,,,,,,,*************/*, #(///***********///****//****/////***/*******//**
********************************************@@@@@@@@#%%%%%%%%%%%%##((((//(/**********///*/**,*****,  .#(///((/(((((///***/**********/******//*********
*/*******/***********************,******%&@@@@@@@@@@##&%%%%#%#########(((((//((//(///(/////******,#   *&#/////(((##(#(((((((((((/////*****///******//*
*******//((/****/****************#%%%&@@@@@@@@@@@@@@&##&&%%%%%%%%########(((((///////(((///****,,(     %%%#///(//((((/#(((/((((((#(((((((/(/((///****/
*******/**************,,(&%&%#%&&@&&@@@@@@@@@@@@@@@@@&#(#@@%%%%########(((/(/////////////*****,//     .%%&&%#///(/(/(///##/((/(#(((#(#(##(##(/((((///(
*//**********/#&%%%#%%%#%%&&&&&&&&@@@@@@@@@@@@@@@@@@&&&#(((%@@%####((((//(((///////////**/***/*       ,###&@%#/#/////((((//(/((((((((#(((#(###(//((///
******#%%%%%%&%%&%&%&%&&&&&&&&&@@@@@@@@@@@@@@@@@@@@&&&&%#(((((#@&#(#(((///(////*/////****/(#   ...  ..*####@@%((((#//*//////(/#((((((((((##(((((//(/(#
@&%&&&&%&&%%%&&&%%&&&&&%@&&@&@@@@@@@@@@@@@@@@@@@@@&&&&&%%#((//////&%#////////(//////*///#  .   .   ..,/((##&@@%#//(*/(%(////////(((#/(/(#((#(/##(#((//

GRAZIE PER TUTTI I RICORDI, I PENSIERI E LE RISATE CHE HAI SAPUTO REGALARCI, IL 2020 TI PORTA VIA MA RESTERAI SEMPRE IN VITA NEI NOSTRI CUORI.
NON E' UN ADDIO, MA UNA ARRIVEDERCI. CIAO PASQUALE.
-->

<!DOCTYPE HTML>
<html>
	<head>
		<title>Unilpe nel sociale</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
		<link rel="stylesheet" href="assets/css/main.css" />
		<style>
			/* Contenitore Menù */
			.event-selector-container {
				text-align: center;
				padding: 3.5em 0;
				background-color: #f9f9f9;
				border-bottom: solid 1px #e5e5e5;
				position: relative; 
				z-index: 1000;
			}

			/* STILE BOOTSTRAP 5 DROPDOWN CUSTOM */
			.bs-dropdown {
				position: relative;
				display: inline-block;
				width: 100%;
				max-width: 500px;
				text-align: left;
			}
			.bs-btn {
				width: 100%;
				background-color: #fff !important;
				border: 1px solid #ced4da !important;
				border-radius: 0.375rem !important;
				padding: 0.8rem 1.5rem !important;
				font-size: 1.1rem !important;
				color: #495057 !important;
				cursor: pointer;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-shadow: 0 2px 4px rgba(0,0,0,0.03);
				transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
				box-sizing: border-box;
				text-transform: none !important;
				letter-spacing: normal !important;
				font-weight: 500 !important;
				font-family: inherit;
			}
			.bs-btn:focus {
				border-color: #86b7fe !important;
				outline: 0;
				box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25) !important;
			}
			.bs-btn::after {
				content: "";
				border-top: 0.35em solid;
				border-right: 0.35em solid transparent;
				border-bottom: 0;
				border-left: 0.35em solid transparent;
				margin-left: 1em;
			}
			.bs-dropdown-menu {
				position: absolute;
				top: 100%;
				left: 0;
				z-index: 1000;
				display: none;
				width: 100%;
				padding: 0.5rem 0;
				margin: 0.25rem 0 0;
				font-size: 1rem;
				color: #212529;
				text-align: left;
				background-color: #fff;
				background-clip: padding-box;
				border: 1px solid rgba(0,0,0,.15);
				border-radius: 0.375rem;
				box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175);
				box-sizing: border-box;
				max-height: 400px;
				overflow-y: auto;
			}
			.bs-dropdown-menu.show {
				display: block;
				animation: fadeIn 0.2s ease-in-out;
			}
			.bs-dropdown-item {
				display: block;
				width: 100%;
				padding: 0.6rem 1.5rem;
				clear: both;
				font-weight: 400;
				color: #212529 !important;
				text-align: inherit;
				white-space: normal; 
				background-color: transparent;
				border: 0;
				box-sizing: border-box;
				text-decoration: none !important;
				transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
				border-bottom: none !important;
				cursor: pointer;
			}
			.bs-dropdown-item:hover, .bs-dropdown-item:focus {
				color: #1e2125 !important;
				background-color: #e9ecef;
			}
			.bs-dropdown-item.active {
				color: #fff !important;
				background-color: #0d6efd;
				font-weight: bold;
			}
			@keyframes fadeIn {
				from { opacity: 0; transform: translateY(-10px); }
				to { opacity: 1; transform: translateY(0); }
			}

			/* Stile Slideshow Responsive */
			.custom-slideshow-wrapper {
				position: relative;
				max-width: 850px;
				margin: 0 auto 2em auto;
				border-radius: 12px;
				overflow: hidden;
				box-shadow: 0 10px 20px rgba(0,0,0,0.15);
				background: #000;
			}
			/* Contenitore della singola slide (immagine + bottone) */
			.slide-item {
				width: 100%;
				display: none;
				height: 60vh; /* Altezza adattabile */
				max-height: 600px;
				min-height: 350px;
				position: relative;
			}
			.slide-item.active {
				display: block;
				animation: fade 0.6s ease-in-out;
			}
			@keyframes fade {
				from {opacity: .4} 
				to {opacity: 1}
			}
			/* Regole immagine */
			.slide-image {
				width: 100%;
				height: 100%;
				object-fit: contain; /* Questo non taglia la foto e aggiunge le barre nere */
			}
			/* Regole frecce */
			.slide-btn {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background: rgba(0,0,0,0.5);
				color: white;
				border: none;
				cursor: pointer;
				width: 50px; /* Cerchio perfetto */
				height: 50px; /* Cerchio perfetto */
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24px;
				border-radius: 50%;
				transition: 0.3s;
				user-select: none;
				z-index: 10;
				padding: 0; /* Rimosso il padding che creava l'ovale */
			}
			.slide-btn:hover { background: rgba(0,0,0,0.8); }
			.slide-prev { left: 15px; }
			.slide-next { right: 15px; }

			/* Stile Bottone Ingrandisci */
			.enlarge-btn {
				position: absolute;
				bottom: 20px;
				right: 20px;
				background: rgba(255, 255, 255, 0.85);
				color: #222 !important;
				padding: 8px 16px;
				border-radius: 20px;
				font-size: 0.9em;
				font-weight: bold;
				text-decoration: none !important;
				box-shadow: 0 2px 5px rgba(0,0,0,0.4);
				transition: all 0.3s ease;
				z-index: 10;
			}
			.enlarge-btn:hover {
				background: #fff;
				transform: scale(1.05);
			}
			
			.event-description {
				text-align: left;
				max-width: 850px;
				margin: 0 auto;
				font-size: 1.1em;
				line-height: 1.8;
			}

			/* AGGIUNTE PER RESPONSIVITÀ PERFETTA */
			@media screen and (max-width: 768px) {
				.bs-btn {
					font-size: 1rem !important;
					padding: 0.6rem 1rem !important;
				}
				.slide-item {
					min-height: 250px;
					height: 40vh;
				}
				.slide-btn {
					width: 40px;
					height: 40px;
					font-size: 18px;
				}
				.enlarge-btn {
					padding: 6px 12px;
					font-size: 0.8em;
					bottom: 10px;
					right: 10px;
				}
				.event-selector-container {
					padding: 2.5em 15px;
				}
				.custom-slideshow-wrapper {
					margin-left: 15px;
					margin-right: 15px;
				}
				.event-description {
					padding: 0 15px;
				}
			}
		</style>
	</head>
	<body>

		<!-- Header -->
		<section id="header">
			<div class="inner">
				<span class="icon major fa-cloud"></span><br />
				<img src="images/logo_unilpe.png" style="width:340px; max-width: 100%;">
				<h1>Unilpe si impegna da sempre <strong>nel sociale</strong>, <br>da oggi puoi sostenere anche tu la nostra grande famiglia.</h1>
				<p>Dona il tuo 5x1000 alla nostra associazione<br />
				contribuisci a sostenere i nostri progetti.</p>
				
				<!-- Sezione Bottoni: Apri PDF e Copia CF -->
				<ul class="actions">
					<li><a href="./include/5x1000Modello.pdf" target="_blank" class="button">Dona il tuo 5x1000</a></li>
					<li>
						<a href="javascript:void(0)" onclick="copiaCF('95200650638')" class="button" title="Copia il codice fiscale negli appunti">
							<span class="icon fa-copy"></span> Copia CF: 95200650638
						</a>
					</li>
				</ul>
			</div>
		</section>
		
		<!-- Selettore Eventi Dinamico (Stile Bootstrap) -->
		<div id="event-anchor" class="event-selector-container">
			<div class="bs-dropdown">
				<button class="bs-btn" type="button" onclick="toggleDropdown(event)">
					Maggio 2026 -  Azione di sensibilizzazione sul tema del bullismo. Donazione libri alle biblioteche scolastiche				</button>
				<div class="bs-dropdown-menu" id="dropdownList">
					<a class="bs-dropdown-item " href="?#event-anchor">
						★ Torna alla Home / Ultima Iniziativa
					</a>
											<a class="bs-dropdown-item " href="?evento=11-settembre-2026---futuro-a-colori-un-gesto-di-bellezza-che-crea-opportunit--1789143498#event-anchor">
							11 settembre 2026 - Futuro a colori: un gesto di bellezza che crea opportunità						</a>
											<a class="bs-dropdown-item " href="?evento=Donazione-corredi-scolastici#event-anchor">
							25 luglio 2026 - Donazione kit scolastici ai minori appartenenti alle comunità Rom e Sinti e ai bambini dei villaggi del Togo 						</a>
											<a class="bs-dropdown-item " href="?evento=giornata-mare-luzzatti#event-anchor">
							09 e 16 luglio 2026 - Giornate al mare all'insegna della socializzazione e condivisione per i giovanissimi del Rione Luzzatti - 						</a>
											<a class="bs-dropdown-item " href="?evento=pacchi-alimentari-luzzatti#event-anchor">
							06 luglio 2026 - Iniziativa di solidarietà destinata a 50 famiglie assistite dalla Parrocchia Sacra Famiglia dei Padri Giuseppini. Distribuiti generi alimentari						</a>
											<a class="bs-dropdown-item " href="?evento=libri-poggioreale#event-anchor">
							20 maggio 2026 - Donazione libri alla biblioteca della Casa Circondariale di Napoli Poggioreale -						</a>
											<a class="bs-dropdown-item active" href="?evento=libri-bullismo#event-anchor">
							Maggio 2026 -  Azione di sensibilizzazione sul tema del bullismo. Donazione libri alle biblioteche scolastiche						</a>
											<a class="bs-dropdown-item " href="?evento=pasqua-2026#event-anchor">
							Aprile 2026 Pasqua Solidale						</a>
											<a class="bs-dropdown-item " href="?evento=natale-2024#event-anchor">
							Natale Solidale 2024						</a>
											<a class="bs-dropdown-item " href="?evento=sacco-amore#event-anchor">
							Un Sacco d'Amore						</a>
											<a class="bs-dropdown-item " href="?evento=befana-solidale#event-anchor">
							Gennaio 2023 Befana Solidale Acerra 						</a>
									</div>
			</div>
		</div>

		<!-- Sezione Iniziativa (Dinamica) -->
		<section id="dynamic-event" class="main style1 special">
			<div class="container">
				
				
									<header class="major">
						<h2>Maggio 2026 -  Azione di sensibilizzazione sul tema del bullismo. Donazione libri alle biblioteche scolastiche</h2>
					</header>

					<!-- Slideshow -->
					<div class="custom-slideshow-wrapper">
													<!-- Div contenitore per l'immagine -->
							<div class="slide-item active">
								
								<!-- Immagine cliccabile -->
								<a href="./images/librisolidali2026/mazzini.jpg" target="_blank" title="Clicca per aprire l'immagine a grandezza naturale">
									<img src="./images/librisolidali2026/mazzini.jpg" class="slide-image" alt="Foto Evento">
								</a>

								<!-- Pulsante Ingrandisci Immagine in sovraimpressione -->
								<a href="./images/librisolidali2026/mazzini.jpg" target="_blank" class="enlarge-btn">
									Ingrandisci immagine
								</a>

							</div>
													<!-- Div contenitore per l'immagine -->
							<div class="slide-item ">
								
								<!-- Immagine cliccabile -->
								<a href="./images/librisolidali2026/fermigadda.jpg" target="_blank" title="Clicca per aprire l'immagine a grandezza naturale">
									<img src="./images/librisolidali2026/fermigadda.jpg" class="slide-image" alt="Foto Evento">
								</a>

								<!-- Pulsante Ingrandisci Immagine in sovraimpressione -->
								<a href="./images/librisolidali2026/fermigadda.jpg" target="_blank" class="enlarge-btn">
									Ingrandisci immagine
								</a>

							</div>
													<!-- Div contenitore per l'immagine -->
							<div class="slide-item ">
								
								<!-- Immagine cliccabile -->
								<a href="./images/librisolidali2026/CACCIOPPOLI.jpg" target="_blank" title="Clicca per aprire l'immagine a grandezza naturale">
									<img src="./images/librisolidali2026/CACCIOPPOLI.jpg" class="slide-image" alt="Foto Evento">
								</a>

								<!-- Pulsante Ingrandisci Immagine in sovraimpressione -->
								<a href="./images/librisolidali2026/CACCIOPPOLI.jpg" target="_blank" class="enlarge-btn">
									Ingrandisci immagine
								</a>

							</div>
													<!-- Div contenitore per l'immagine -->
							<div class="slide-item ">
								
								<!-- Immagine cliccabile -->
								<a href="./images/librisolidali2026/GARIBALDI.jpg" target="_blank" title="Clicca per aprire l'immagine a grandezza naturale">
									<img src="./images/librisolidali2026/GARIBALDI.jpg" class="slide-image" alt="Foto Evento">
								</a>

								<!-- Pulsante Ingrandisci Immagine in sovraimpressione -->
								<a href="./images/librisolidali2026/GARIBALDI.jpg" target="_blank" class="enlarge-btn">
									Ingrandisci immagine
								</a>

							</div>
												
													<button class="slide-btn slide-prev" onclick="changeSlide(-1)">&#10094;</button>
							<button class="slide-btn slide-next" onclick="changeSlide(1)">&#10095;</button>
											</div>
					
					<!-- Descrizione e Link -->
					<div class="event-description">
						<p>Nell’ambito del progetto - azione di sensibilizzazione sul delicato tema del bullismo e cyberbullismo, Unilpe nel Sociale APS ha donato alle biblioteche scolastiche i libri "Bullismo e Cyberbullismo Ash identity, ambivalenza culturale e nuovi scenari educativi" di Giuseppina Filieri, per sensibilizzare gli studenti sulla tematica che sfocia in episodi sempre più tragici.</p>
											</div>
				
			</div>
			
			<p style="text-align: center; margin-top: 2em;">
				<a href="./include/curriculum_unilpe.docx" target="_BLANK" class="button">
					Visualizza il nostro curriculum
				</a>
			</p>
			
						<p style="text-align: center; margin-top: 2em;">
				<a href="./include/rendiconto_annuale/rendiconto2023.pdf" target="_BLANK" class="button">
					Scarica il rendiconto aggiornato!
				</a>
			</p>
			
			

		</section>

		<!-- LE SEZIONI SEGUENTI VENGONO MOSTRATE SOLO IN HOME -->
		
		<!-- Sezione Contatti sempre visibile -->
		<section id="four" class="main style2 special">
			<div class="container">
				<header class="major">
					<h2>Desideri ulteriori informazioni?</h2>
				</header>
				<p>Non esitare a contattarci</p>
				<ul class="actions uniform">
					<li><a href="#" class="button special">Contattaci al numero: 081-17562682</a></li>
					<li><a href="./include/5x1000-guida.png" class="button">Indirizzo: Napoli, Vico tutti i santi 3, scala B 2° piano</a></li>
				</ul>
			</div>
		</section>

		<!-- Footer sempre visibile -->
		<section id="footer">
			<ul class="icons">
				<li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
				<li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li>
				<li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>
				<li><a href="#" class="icon alt fa-envelope"><span class="label">Email</span></a></li>
			</ul>
			<ul class="copyright">
				<li>Unilpe &copy; Tutti i diritti sono riservati</li><li>unilpenelsocialeaps@libero.it</li>
			</ul>
		</section>

		<!-- Scripts -->
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/jquery.scrolly.min.js"></script>
		<script src="assets/js/skel.min.js"></script>
		<script src="assets/js/util.js"></script>
		<script src="assets/js/main.js"></script>

		<!-- JS Integrato -->
		<script>
			// Gestione Copia Codice Fiscale
			function copiaCF(cf) {
				if (navigator.clipboard && window.isSecureContext) {
					// Fallback preferenziale per navigator API
					navigator.clipboard.writeText(cf).then(() => {
						alert("Codice Fiscale " + cf + " copiato negli appunti!");
					});
				} else {
					// Fallback cross-browser per contesti classici HTTP
					var textArea = document.createElement("textarea");
					textArea.value = cf;
					// Si nasconde l'elemento dalla UI
					textArea.style.position = "fixed";
					textArea.style.left = "-999999px";
					textArea.style.top = "-999999px";
					document.body.appendChild(textArea);
					textArea.focus();
					textArea.select();
					try {
						document.execCommand('copy');
						alert("Codice Fiscale " + cf + " copiato negli appunti!");
					} catch (err) {
						alert("Errore durante la copia. Seleziona e copia manualmente: " + cf);
					}
					textArea.remove();
				}
			}

			// Gestione Dropdown "Stile Bootstrap"
			function toggleDropdown(event) {
				event.stopPropagation(); // Previene la chiusura immediata
				document.getElementById("dropdownList").classList.toggle("show");
			}
			
			// Chiude il dropdown se si clicca fuori
			window.onclick = function(event) {
				if (!event.target.matches('.bs-btn')) {
					var dropdowns = document.getElementsByClassName("bs-dropdown-menu");
					for (var i = 0; i < dropdowns.length; i++) {
						var openDropdown = dropdowns[i];
						if (openDropdown.classList.contains('show')) {
							openDropdown.classList.remove('show');
						}
					}
				}
			}

			// Gestione Slideshow modificata per agire sui contenitori .slide-item
			let slideIndex = 0;
			function changeSlide(n) {
				let slides = document.getElementsByClassName("slide-item");
				if(slides.length <= 1) return;
				
				slides[slideIndex].classList.remove("active");
				slideIndex += n;
				
				if (slideIndex >= slides.length) slideIndex = 0;
				if (slideIndex < 0) slideIndex = slides.length - 1;
				
				slides[slideIndex].classList.add("active");
			}
		</script>
	</body>
</html>