carousel cancer

src/routes/predseda.svelte

@@ -253,7 +253,7 @@ Všechny spolky i SORky mají společný Google kalendář, kam se mimo jiné za
 
 		  <!-- Full-width images with number and caption text -->
 		  <div class="mySlides fade">
-		    <div class="numbertext">1 / 3</div>
+		    <div class="numbertext">1 / 2</div>
     		<video class="smol-video" controls style="width: 100%">
     			<source src="/video/5_lenka.mp4" type="video/webm">
     			Your browser does not support video.
@@ -261,7 +261,7 @@ Všechny spolky i SORky mají společný Google kalendář, kam se mimo jiné za
 		  </div>
 
 		  <div class="mySlides fade">
-		    <div class="numbertext">2 / 3</div>
+		    <div class="numbertext">2 / 2</div>
     		<video class="smol-video" controls style="width: 100%">
     			<source src="/video/4_holka_pozvanka.mp4" type="video/webm">
     			Your browser does not support video.

src/routes/zapojit-se.svelte

@@ -13,6 +13,12 @@
 	import MenuBtn from '../components/menu-btn.svelte';
 	import ZjistiBtn from '../components/zjisti-vice.svelte';
 	import Carousel from '@beyonk/svelte-carousel';
+	import { onMount } from 'svelte';
+
+	onMount(async () => {
+		window.showSlides(1, "mySlides2", "slideIndex2");
+		window.showSlides(1, "mySlides3", "slideIndex3");
+	});
 </script>
 
 <svelte:head>
@@ -148,25 +154,51 @@
 		<hr class="thing-hr">
 	</div>
 </section>
-<section class="row" style="margin-top: 4vh">
+<section class="row" style="margin-top: 4vh" id="dalsi">
-    <section class="col">
-		<video class="smol-video" controls style="width: 100%">
-			<source src="/video/7_jana.mp4" type="video/webm">
-			Your browser does not support video.
-		</video>
-    </section>
-    <section class="col">
-		<video class="smol-video" controls style="width: 100%">
-			<source src="/video/8_stepan.mp4" type="video/webm">
-			Your browser does not support video.
-		</video>
-    </section>
 	<section class="col">
-		<video class="smol-video" controls style="width: 100%">
+		<link rel="stylesheet" href="/css/carousel.css">
-			<source src="/video/1_verca_1.mp4" type="video/webm">
+		 <!-- Slideshow container -->
-			Your browser does not support video.
+		<div class="slideshow-container">
-		</video>
+
+		  <!-- Full-width images with number and caption text -->
+		  <div class="mySlides2 fade">
+		    <div class="numbertext">1 / 3</div>
+    		<video class="smol-video" controls style="width: 100%">
+    			<source src="/video/7_jana.mp4" type="video/webm">
+    			Your browser does not support video.
+    		</video>
+		  </div>
+
+		  <div class="mySlides2 fade">
+		    <div class="numbertext">2 / 3</div>
+    		<video class="smol-video" controls style="width: 100%">
+    			<source src="/video/8_stepan.mp4" type="video/webm">
+    			Your browser does not support video.
+    		</video>
+		  </div>
+
+		  <div class="mySlides2 fade">
+		    <div class="numbertext">3 / 3</div>
+    		<video class="smol-video" controls style="width: 100%">
+    			<source src="/video/1_verca_1.mp4" type="video/webm">
+    			Your browser does not support video.
+    		</video>
+		  </div>
+
+		  <!-- Next and previous buttons -->
+		  <a class="prev" onclick="plusSlides(-1, 'mySlides2', 'slideIndex2', 'dot2')" href="/zapojit-se#0">&#10094;</a>
+		  <a class="next" onclick="plusSlides(1, 'mySlides2', 'slideIndex2', 'dot2')" href="/zapojit-se#0">&#10095;</a>
+		</div>
+		<br>
+
+		<!-- The dots/circles -->
+		<div style="text-align:center">
+		  <span class="dot dot2 carousel-active" onclick="currentSlide(1, 'mySlides2', 'slideIndex2', 'dot2')"></span>
+		  <span class="dot dot2" onclick="currentSlide(2, 'mySlides2', 'slideIndex2', 'dot2')"></span>
+		  <span class="dot dot2" onclick="currentSlide(3, 'mySlides2', 'slideIndex2', 'dot2')"></span>
+		</div>
 	</section>
+	<script src="js/carousel.js"></script>
 </section>
 <section class="row" style="margin-top: 14vh">
 	<div class="col-1"></div>
@@ -175,31 +207,59 @@
 		<hr class="thing-hr">
 	</div>
 </section>
-<section class="row" style="margin-top: 4vh">
+<section class="row" style="margin-top: 4vh" id="dalsi">
-    <section class="col">
-		<video class="smol-video" controls style="width: 100%">
-			<source src="/video/4_holka_pozvanka.mp4" type="video/webm">
-			Your browser does not support video.
-		</video>
-    </section>
-    <section class="col">
-		<video class="smol-video" controls style="width: 100%">
-			<source src="/video/6_petr.mp4" type="video/webm">
-			Your browser does not support video.
-		</video>
-    </section>
 	<section class="col">
-		<video class="smol-video" controls style="width: 100%">
+		<link rel="stylesheet" href="/css/carousel.css">
-			<source src="/video/11_lenka_2.mp4" type="video/webm">
+		 <!-- Slideshow container -->
-			Your browser does not support video.
+		<div class="slideshow-container">
-		</video>
+
-	</section>
+		  <!-- Full-width images with number and caption text -->
-	<section class="col">
+		  <div class="mySlides3 fade">
-		<video class="smol-video" controls style="width: 100%">
+		    <div class="numbertext">1 / 4</div>
-			<source src="/video/9_devce.mp4" type="video/webm">
+    		<video class="smol-video" controls style="width: 100%">
-			Your browser does not support video.
+    			<source src="/video/4_holka_pozvanka.mp4" type="video/webm">
-		</video>
+    			Your browser does not support video.
+    		</video>
+		  </div>
+
+		  <div class="mySlides3 fade">
+		    <div class="numbertext">2 / 4</div>
+    		<video class="smol-video" controls style="width: 100%">
+    			<source src="/video/6_petr.mp4" type="video/webm">
+    			Your browser does not support video.
+    		</video>
+		  </div>
+
+		  <div class="mySlides3 fade">
+		    <div class="numbertext">3 / 4</div>
+    		<video class="smol-video" controls style="width: 100%">
+    			<source src="/video/11_lenka_2.mp4" type="video/webm">
+    			Your browser does not support video.
+    		</video>
+		  </div>
+		  <div class="mySlides3 fade">
+		    <div class="numbertext">4 / 4</div>
+    		<video class="smol-video" controls style="width: 100%">
+    			<source src="/video/9_devce.mp4" type="video/webm">
+    			Your browser does not support video.
+    		</video>
+		  </div>
+
+		  <!-- Next and previous buttons -->
+		  <a class="prev" onclick="plusSlides(-1, 'mySlides3', 'slideIndex3', 'dot3')" href="/zapojit-se#0">&#10094;</a>
+		  <a class="next" onclick="plusSlides(1, 'mySlides3', 'slideIndex3', 'dot3')" href="/zapojit-se#0">&#10095;</a>
+		</div>
+		<br>
+
+		<!-- The dots/circles -->
+		<div style="text-align:center">
+		  <span class="dot dot3 carousel-active" onclick="currentSlide(1, 'mySlides3', 'slideIndex3', 'dot3')"></span>
+		  <span class="dot dot3" onclick="currentSlide(2, 'mySlides3', 'slideIndex3', 'dot3')"></span>
+		  <span class="dot dot3" onclick="currentSlide(3, 'mySlides3', 'slideIndex3', 'dot3')"></span>
+		  <span class="dot dot3" onclick="currentSlide(4, 'mySlides3', 'slideIndex3', 'dot3')"></span>
+		</div>
 	</section>
+	<script src="js/carousel.js"></script>
 </section>
 <section class="row" style="margin-top: 5vh">
 	<div class="col flexy-boi" style="background-position: top center">

static/js/carousel.js

@@ -14,24 +14,26 @@ function checkElement(selector)	{
 }
 
 var slideIndex = 1;
+var slideIndex2 = 1;
+var slideIndex3 = 1;
 
 
 // Next/previous controls
-function plusSlides(n, className = "mySlides") {
+function plusSlides(n, className = "mySlides", counter = "slideIndex", dotclass = "dot") {
   console.log("changing slides");
-  showSlides(slideIndex += n, className);
+  showSlides(window[counter] += n, className, counter, dotclass);
 }
 
 // Thumbnail image controls
-function currentSlide(n, className = "mySlides") {
+function currentSlide(n, className = "mySlides", counter = "slideIndex", dotclass = "dot") {
-  showSlides(slideIndex = n, className);
+  showSlides(window[counter] = n, className, counter, dotclass);
 }
 
-function showSlides(n, className = "mySlides") {
+function showSlides(n, className = "mySlides", counter = "slideIndex", dotclass = "dot") {
   var i;
   var slides = document.getElementsByClassName(className);
-  var dots = document.getElementsByClassName("dot");
+  var dots = document.getElementsByClassName(dotclass);
-  if (n > slides.length) {slideIndex = 1}
+  if (n > slides.length) {window[counter] = 1}
   if (n < 1) {slideIndex = slides.length}
   for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
@@ -39,9 +41,9 @@ function showSlides(n, className = "mySlides") {
   for (i = 0; i < dots.length; i++) {
       dots[i].className = dots[i].className.replace(" carousel-active", "");
   }
-  slides[slideIndex-1].style.display = "block";
+  slides[window[counter]-1].style.display = "block";
-  dots[slideIndex-1].className += " carousel-active";
+  dots[window[counter]-1].className += " carousel-active";
-} 
+}
 
 checkElement('.mySlides') //use whichever selector you want
 .then((element) => {
@@ -52,24 +54,13 @@ checkElement('.mySlides') //use whichever selector you want
 checkElement('.mySlides2') //use whichever selector you want
 .then((element) => {
 	console.log("sldaldsaldsa");
-	showSlides(slideIndex, "mySlides2");
+	showSlides(slideIndex2, "mySlides2", "slideIndex2");
 });
 
 checkElement('.mySlides3') //use whichever selector you want
 .then((element) => {
 	console.log("sldaldsaldsa");
-	showSlides(slideIndex, "mySlides3");
+	showSlides(slideIndex3, "mySlides3", "slideIndex3");
-});
-
-checkElement('.mySlides4') //use whichever selector you want
-.then((element) => {
-	console.log("sldaldsaldsa");
-	showSlides(slideIndex, "mySlides4");
 });
 
-checkElement('.mySlides5') //use whichever selector you want
-.then((element) => {
-	console.log("sldaldsaldsa");
-	showSlides(slideIndex, "mySlides5");
-});