forked from tsc-vfl/hugo-page
Create basic slider
This commit is contained in:
parent
085096a8fe
commit
0ec4b0eb68
@ -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 {
|
||||||
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 140 KiB |
2
themes/tsc_vfl/static/js/jquery-3.6.3.min.js
vendored
Normal file
2
themes/tsc_vfl/static/js/jquery-3.6.3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
26
themes/tsc_vfl/static/js/slider.js
Normal file
26
themes/tsc_vfl/static/js/slider.js
Normal 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)
|
||||||
|
})
|
Loading…
Reference in New Issue
Block a user