mirror of
https://github.com/modelec/modelec.club.git
synced 2026-01-18 16:37:30 +01:00
update slide javascript
This commit is contained in:
acki
@@ -42,7 +42,7 @@
|
||||
<div class="card">
|
||||
<h1 class="card-title">Nos partenaires</h1>
|
||||
<p class="card-text">
|
||||
<div class="slideshow-container">
|
||||
<div class="slideshow-container autoslide">
|
||||
<div class="slide fade">
|
||||
<a href="https://mercurycloud.fr"><img src="assets/partners/mercurycloud.png" alt="Logo Mercury Cloud" class="partner-logo"></a>
|
||||
<a href="https://mercurycloud.fr" class="link"><p class="partner-name">Mercury Cloud</p></a>
|
||||
@@ -56,8 +56,8 @@
|
||||
<a href="https://www.instagram.com/odyssey_bde/" class="link"><p class="partner-name">Odyssey BDE ISEN Nantes</p></a>
|
||||
</div>
|
||||
|
||||
<button class="prev" onclick="plusSlides(-1)">❮</button>
|
||||
<button class="next" onclick="plusSlides(1)">❯</button>
|
||||
<button class="prev">❮</button>
|
||||
<button class="next">❯</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-large-width">
|
||||
|
||||
40
photo.html
40
photo.html
@@ -8,7 +8,6 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<script src="slideshow.js" defer></script>
|
||||
<script src="vslideshow.js" defer></script>
|
||||
<link rel="icon" type="image/x-icon" href="assets/modelec-logo-small.png">
|
||||
</head>
|
||||
<body>
|
||||
@@ -24,7 +23,7 @@
|
||||
<div class="card-very-large-width">
|
||||
<h1 class="card-title">Photo coupe de France de robotique 2024</h1>
|
||||
<div class="card-text">
|
||||
<div class="slideshow-container">
|
||||
<div class="slideshow-container autoslide">
|
||||
<div class="slide fade">
|
||||
<img src="assets/photo%20coupe%202024/IMG-20240511-WA0004.jpg" alt="photo coupe de france de robotique 2024" class="photo-coupe">
|
||||
</div>
|
||||
@@ -37,41 +36,42 @@
|
||||
<div class="slide fade">
|
||||
<img src="assets/photo%20coupe%202024/PXL_20240510_230657006.NIGHT.jpg" alt="photo coupe de france de robotique 2024" class="photo-coupe">
|
||||
</div>
|
||||
<button class="prev" onclick="plusSlides(-1)">❮</button>
|
||||
<button class="next" onclick="plusSlides(1)">❯</button>
|
||||
<button class="prev">❮</button>
|
||||
<button class="next">❯</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-very-large-width">
|
||||
<h1 class="card-title">Vidéo coupe de france de robotique 2024</h1>
|
||||
<div class="card-text">
|
||||
<div class="video-slideshow-container">
|
||||
<div class="vslide fade">
|
||||
<iframe src="https://r2.modelec.club/serie%202.mp4" class="video-coupe" allow="autoplay" allowfullscreen width="1920px" height="700px"></iframe>
|
||||
<div class="slideshow-container">
|
||||
<div class="slide fade">
|
||||
<iframe src="https://r2.modelec.club/serie%202.mp4" class="video-coupe" allowfullscreen width="1920px" height="700px"></iframe>
|
||||
<p class="card-subtext">Match de série 2</p>
|
||||
</div>
|
||||
<div class="vslide fade">
|
||||
<iframe src="https://r2.modelec.club/serie%203.mp4" class="video-coupe" allow="autoplay" allowfullscreen width="1920px" height="700px"></iframe>
|
||||
<div class="slide fade">
|
||||
<iframe src="https://r2.modelec.club/serie%203.mp4" class="video-coupe" allowfullscreen width="1920px" height="700px"></iframe>
|
||||
<p class="card-subtext">Match de série 3</p>
|
||||
</div>
|
||||
<div class="vslide fade">
|
||||
<iframe src="https://r2.modelec.club/serie%204.mp4" class="video-coupe" allow="autoplay" allowfullscreen width="1920px" height="700px"></iframe>
|
||||
<div class="slide fade">
|
||||
<iframe src="https://r2.modelec.club/serie%204.mp4" class="video-coupe" allowfullscreen width="1920px" height="700px"></iframe>
|
||||
<p class="card-subtext">Match de série 4</p>
|
||||
</div>
|
||||
<div class="vslide fade">
|
||||
<iframe src="https://r2.modelec.club/serie%205%20pr%C3%A9paration.mp4" class="video-coupe" allow="autoplay" allowfullscreen width="1920px" height="700px"></iframe>
|
||||
<div class="slide fade">
|
||||
<iframe src="https://r2.modelec.club/serie%205%20pr%C3%A9paration.mp4" class="video-coupe" allowfullscreen width="1920px" height="700px"></iframe>
|
||||
<p class="card-subtext">Préparation du match de série 5</p>
|
||||
</div>
|
||||
<div class="vslide fade">
|
||||
<iframe src="https://r2.modelec.club/serie%205.mp4" class="video-coupe" allow="autoplay" allowfullscreen width="1920px" height="700px"></iframe>
|
||||
<p class="card-subtext">Match de série 5</p>s
|
||||
<div class="slide fade">
|
||||
<iframe src="https://r2.modelec.club/serie%205.mp4" class="video-coupe" allowfullscreen width="1920px" height="700px"></iframe>
|
||||
<p class="card-subtext">Match de série 5</p>
|
||||
</div>
|
||||
<div class="vslide fade">
|
||||
<iframe src="https://r2.modelec.club/finale.mp4" class="video-coupe" allow="autoplay" allowfullscreen width="1920px" height="700px"></iframe>
|
||||
<div class="slide fade">
|
||||
<iframe src="https://r2.modelec.club/finale.mp4" class="video-coupe" allowfullscreen width="1920px" height="700px"></iframe>
|
||||
<p class="card-subtext">Match de final</p>
|
||||
</div>
|
||||
<button class="vprev" onclick="vplusSlides(-1)">❮</button>
|
||||
<button class="vnext" onclick="vplusSlides(1)">❯</button>
|
||||
|
||||
<button class="prev">❮</button>
|
||||
<button class="next">❯</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
61
slideshow.js
61
slideshow.js
@@ -1,31 +1,42 @@
|
||||
let slideIndex = 0;
|
||||
let timer;
|
||||
document.querySelectorAll(".slideshow-container").forEach((container) => {
|
||||
let slideIndex = 0;
|
||||
let timer;
|
||||
|
||||
function plusSlides(n) {
|
||||
if (timer) clearTimeout(timer);
|
||||
slideIndex+=n;
|
||||
showSlides();
|
||||
}
|
||||
let sliderChild = [...container.children].filter(child => child.classList.contains("slide"));
|
||||
|
||||
function currentSlide(n) {
|
||||
if (timer) clearTimeout(timer);
|
||||
slideIndex = n;
|
||||
showSlides();
|
||||
}
|
||||
let prevBtn = container.querySelector(".prev");
|
||||
let nextBtn = container.querySelector(".next");
|
||||
|
||||
function showSlides() {
|
||||
let i;
|
||||
let slides = document.getElementsByClassName("slide");
|
||||
for (i = 0; i < slides.length; i++) {
|
||||
slides[i].style.display = "none";
|
||||
}
|
||||
if (slideIndex > slides.length - 1) {slideIndex = 0}
|
||||
slides[slideIndex].style.display = "flex";
|
||||
prevBtn.addEventListener("click", () => plusSlides(-1));
|
||||
nextBtn.addEventListener("click", () => plusSlides(1));
|
||||
|
||||
timer = setTimeout(() => {
|
||||
slideIndex++;
|
||||
function plusSlides(n) {
|
||||
if (timer) clearTimeout(timer);
|
||||
slideIndex+=n;
|
||||
showSlides();
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
showSlides(slideIndex);
|
||||
function currentSlide(n) {
|
||||
if (timer) clearTimeout(timer);
|
||||
slideIndex = n;
|
||||
showSlides();
|
||||
}
|
||||
|
||||
function showSlides() {
|
||||
let i;
|
||||
for (i = 0; i < sliderChild.length; i++) {
|
||||
sliderChild[i].style.display = "none";
|
||||
}
|
||||
if (slideIndex > sliderChild.length - 1) {slideIndex = 0}
|
||||
sliderChild[slideIndex].style.display = "flex";
|
||||
|
||||
if (container.classList.contains("autoslide")) {
|
||||
timer = setTimeout(() => {
|
||||
slideIndex++;
|
||||
showSlides();
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
showSlides(slideIndex);
|
||||
});
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
let vslideIndex = 1;
|
||||
vshowSlides(vslideIndex);
|
||||
|
||||
function vplusSlides(n) {
|
||||
vshowSlides(vslideIndex += n);
|
||||
}
|
||||
|
||||
function vcurrentSlide(n) {
|
||||
vshowSlides(vslideIndex = n);
|
||||
}
|
||||
|
||||
function vshowSlides(n) {
|
||||
let i;
|
||||
let slides = document.getElementsByClassName("vslide");
|
||||
for (i = 0; i < slides.length; i++) {
|
||||
slides[i].style.display = "none";
|
||||
}
|
||||
vslideIndex++;
|
||||
if (vslideIndex > slides.length) {vslideIndex = 1}
|
||||
slides[vslideIndex-1].style.display = "flex";
|
||||
}
|
||||
Reference in New Issue
Block a user