<!DOCTYPE html>
< html lang = "fr" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< link rel = "stylesheet" type = "text/css" href = "css/accueil.css" >
< title > Alica - Accueil< / title >
< / head >
< body >
{% include 'menu.html' %}
< div class = "main" >
< div class = "banner" >
< img class = "banner-img" src = "assets/bandeau.png" >
< div class = "title-banner" >
< div class = "subtitle" > Le réseau Alica te souhaite la bienvenue !< / div >
< div class = "title" > Alica Info< / div >
< div class = "description" > Nous sommes d’ ’ ’ < / div >
< / div >
< / div >
< div class = "slideshow-container" >
{% for event in eventsList %}
< div class = "slide" >
< div class = "slide-img" >
< img src = "{{ event.imagePath }}" >
< / div >
< div class = "slide-info" >
< div class = "slide-date" > {{event.date}}< / div >
< div class = "slide-title" > {{event.nom}}< / div >
< div class = "slide-description" > {{event.description}}< / div >
< a href = "index.php?action=" class = "button" > S'inscrire< / a >
< / div >
< / div >
{% endfor %}
< button class = "prevButton" onclick = "plusDivs(-1)" > ❮ < / button >
< button class = "nextButton" onclick = "plusDivs(1)" > ❯ < / button >
< / div >
< / div >
< / body >
< / html >
< script >
let bar = document.querySelector('.bars'), navItem = document.querySelector('.nav-items');
bar.addEventListener('click', () => {
navItem.classList.toggle('active');
});
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("slide");
if (n > x.length) {slideIndex = 1}
if (n < 1 ) { slideIndex = x.length}
for (i = 0; i < x.length ; i + + ) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "flex";
}
< / script >
