forked from tsc-vfl/hugo-page
Added dots to slider
This commit is contained in:
parent
0ec4b0eb68
commit
5cc05de0dc
@ -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 {
|
||||||
|
@ -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">
|
||||||
|
@ -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)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
Loading…
Reference in New Issue
Block a user