christian/hugo-page-test
1
0
Fork 0
forked from tsc-vfl/hugo-page
Code Pull Requests Activity

Added dots to slider

Browse Source
This commit is contained in:
Christian Wolf
2023-01-21 23:57:23 +01:00
parent 0ec4b0eb68
commit 5cc05de0dc
3 changed files with 44 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
themes/tsc_vfl/layouts/partials/page/header.html
View File

@@ -14,6 +14,14 @@
<img src="{{ relURL "img/banner/Fotobanner2.jpg" }}" class="hidden">
<img src="{{ relURL "img/banner/Paare_2019.jpg" }}" class="hidden">
<img src="{{ relURL "img/banner/slider-turnier.jpg" }}" class="hidden">
<div class="dots">
<div data-index="0" class="dot active"></div>
<div data-index="1" class="dot"></div>
<div data-index="2" class="dot"></div>
<div data-index="3" class="dot"></div>
<div data-index="4" class="dot"></div>
<div data-index="5" class="dot"></div>
</div>
</div>
<div id="nav-border" class="container nav">
<nav id="nav" class="nav justify-content-center">

12
themes/tsc_vfl/static/js/slider.js
View File

@@ -3,9 +3,14 @@ $(function () {
const maxIndex = 5
const delay = 7000
function showImage(idx) {
// console.log("switching to index", idx)
const imgs = $('#header .slider img')
imgs.eq(idx).removeClass('hidden')
imgs.filter((i, e) => {return i != idx}).addClass('hidden')
const dots = $('#header .slider .dots .dot')
dots.removeClass('active')
dots.eq(idx).addClass('active')
index = idx
}
function getNextIndex() {
const ret = index + 1
@@ -17,10 +22,13 @@ $(function () {
}
function nextImage() {
const newIdx = getNextIndex()
console.log("switching to index", newIdx)
showImage(newIdx)
index = newIdx
setTimeout(nextImage, delay)
}
setTimeout(nextImage, delay)
$('#header .slider .dots .dot').click(function (evt) {
// console.log(evt)
const newIdx = $(evt.target).data('index')
showImage(newIdx)
})
})