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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
assets/main.scss
View File

@ -74,6 +74,7 @@ h1 {
width: calc(100% - 20px);
// display: block;
position: absolute;
z-index: 0;
opacity: 1;
transition: opacity 2.5s ease-in-out;
@ -81,6 +82,31 @@ h1 {
opacity: 0;
}
}
.dots {
position: absolute;
width: 95%;
z-index: 1;
left: 0;
bottom: 10%;
display: flex;
justify-content: end;
.dot {
width: 10px;
height: 10px;
margin: 0 10px 0 0;
border-radius: 5px;
background-color: #eee;
border: 1.5px solid #444;
&.active {
background-color: #444;
border: 1.5px solid #ccc;
}
}
}
}
> .nav {

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)
})
})