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); width: calc(100% - 20px);
// display: block; // display: block;
position: absolute; position: absolute;
z-index: 0;
opacity: 1; opacity: 1;
transition: opacity 2.5s ease-in-out; transition: opacity 2.5s ease-in-out;
@ -81,6 +82,31 @@ h1 {
opacity: 0; 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 { > .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/Fotobanner2.jpg" }}" class="hidden">
<img src="{{ relURL "img/banner/Paare_2019.jpg" }}" class="hidden"> <img src="{{ relURL "img/banner/Paare_2019.jpg" }}" class="hidden">
<img src="{{ relURL "img/banner/slider-turnier.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>
<div id="nav-border" class="container nav"> <div id="nav-border" class="container nav">
<nav id="nav" class="nav justify-content-center"> <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 maxIndex = 5
const delay = 7000 const delay = 7000
function showImage(idx) { function showImage(idx) {
// console.log("switching to index", idx)
const imgs = $('#header .slider img') const imgs = $('#header .slider img')
imgs.eq(idx).removeClass('hidden') imgs.eq(idx).removeClass('hidden')
imgs.filter((i, e) => {return i != idx}).addClass('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() { function getNextIndex() {
const ret = index + 1 const ret = index + 1
@ -17,10 +22,13 @@ $(function () {
} }
function nextImage() { function nextImage() {
const newIdx = getNextIndex() const newIdx = getNextIndex()
console.log("switching to index", newIdx)
showImage(newIdx) showImage(newIdx)
index = newIdx
setTimeout(nextImage, delay) setTimeout(nextImage, delay)
} }
setTimeout(nextImage, delay) setTimeout(nextImage, delay)
$('#header .slider .dots .dot').click(function (evt) {
// console.log(evt)
const newIdx = $(evt.target).data('index')
showImage(newIdx)
})
}) })