Create basic slider

This commit is contained in:
Christian Wolf 2023-01-21 23:57:03 +01:00
parent 085096a8fe
commit 0ec4b0eb68
5 changed files with 41 additions and 3 deletions

View File

@ -63,14 +63,23 @@ h1 {
> .slider { > .slider {
width: calc(100% - 60px); width: calc(100% - 60px);
// height: 250px; height: 250px;
display: flex; display: flex;
padding: 0 10px; padding: 0 10px;
border-right: 20px solid $color_red; border-right: 20px solid $color_red;
border-left: 20px solid $color_red; border-left: 20px solid $color_red;
position: relative;
> img { > img {
width: 100%; width: calc(100% - 20px);
// display: block;
position: absolute;
opacity: 1;
transition: opacity 2.5s ease-in-out;
&.hidden {
opacity: 0;
}
} }
} }
@ -130,6 +139,7 @@ h1 {
#content { #content {
flex: 100% 0 1; flex: 100% 0 1;
text-align: justify;
table { table {
width: 100%; width: 100%;
@ -156,7 +166,7 @@ h1 {
.float-right { .float-right {
float: right; float: right;
margin-left: 15px; margin: 7px 0 7px 15px;
} }
a { a {

View File

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 78 KiB

View File

Before

Width:  |  Height:  |  Size: 140 KiB

After

Width:  |  Height:  |  Size: 140 KiB

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,26 @@
$(function () {
var index = 0
const maxIndex = 5
const delay = 7000
function showImage(idx) {
const imgs = $('#header .slider img')
imgs.eq(idx).removeClass('hidden')
imgs.filter((i, e) => {return i != idx}).addClass('hidden')
}
function getNextIndex() {
const ret = index + 1
if (ret > maxIndex) {
return 0
} else {
return ret
}
}
function nextImage() {
const newIdx = getNextIndex()
console.log("switching to index", newIdx)
showImage(newIdx)
index = newIdx
setTimeout(nextImage, delay)
}
setTimeout(nextImage, delay)
})