pedf
/
spolky
Archived
1
0
Fork 0
Code Pull Requests Releases Activity

carousel cancer

Browse Source
master
Lukáš Hozda 4 years ago
parent 2de2e818f4
commit 1892a7cf95
3 changed files with 116 additions and 65 deletions
Show Stats Download Patch File Download Diff File

4
src/routes/predseda.svelte
Unescape Escape View File

@ -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 --> <!-- Full-width images with number and caption text -->
<div class="mySlides fade"> <div class="mySlides fade">
<div class="numbertext">1 / 3</div> <div class="numbertext">1 / 2</div>
<video class="smol-video" controls style="width: 100%"> <video class="smol-video" controls style="width: 100%">
<source src="/video/5_lenka.mp4" type="video/webm"> <source src="/video/5_lenka.mp4" type="video/webm">
Your browser does not support video. 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>
<div class="mySlides fade"> <div class="mySlides fade">
<div class="numbertext">2 / 3</div> <div class="numbertext">2 / 2</div>
<video class="smol-video" controls style="width: 100%"> <video class="smol-video" controls style="width: 100%">
<source src="/video/4_holka_pozvanka.mp4" type="video/webm"> <source src="/video/4_holka_pozvanka.mp4" type="video/webm">
Your browser does not support video. Your browser does not support video.

140
src/routes/zapojit-se.svelte
Unescape Escape View File

@ -13,6 +13,12 @@
import MenuBtn from '../components/menu-btn.svelte'; import MenuBtn from '../components/menu-btn.svelte';
import ZjistiBtn from '../components/zjisti-vice.svelte'; import ZjistiBtn from '../components/zjisti-vice.svelte';
import Carousel from '@beyonk/svelte-carousel'; import Carousel from '@beyonk/svelte-carousel';
import { onMount } from 'svelte';
onMount(async () => {
window.showSlides(1, "mySlides2", "slideIndex2");
window.showSlides(1, "mySlides3", "slideIndex3");
});
</script> </script>
<svelte:head> <svelte:head>
@ -148,25 +154,51 @@
<hr class="thing-hr"> <hr class="thing-hr">
</div> </div>
</section> </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"> <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> </section>
<script src="js/carousel.js"></script>
</section> </section>
<section class="row" style="margin-top: 14vh"> <section class="row" style="margin-top: 14vh">
<div class="col-1"></div> <div class="col-1"></div>
@ -175,31 +207,59 @@
<hr class="thing-hr"> <hr class="thing-hr">
</div> </div>
</section> </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"> <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> </section>
<script src="js/carousel.js"></script>
</section> </section>
<section class="row" style="margin-top: 5vh"> <section class="row" style="margin-top: 5vh">
<div class="col flexy-boi" style="background-position: top center"> <div class="col flexy-boi" style="background-position: top center">

35
static/js/carousel.js
Unescape Escape View File

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