tsc-vfl/hugo-page
3
0
Fork 1
Code Issues 6 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

Fixed sizing issue by duplicating image

Browse Source
This commit is contained in:
Christian Wolf 2023-01-22 00:02:29 +01:00
parent 8cf3187666
commit c63201cbb0
3 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/main.scss
View File

@ -63,7 +63,7 @@ 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;
@ -81,6 +81,12 @@ h1 {
&.hidden { &.hidden {
opacity: 0; opacity: 0;
} }
&.placeholder {
position: static;
visibility: hidden;
width: 100%;
}
} }
.dots { .dots {

13
themes/tsc_vfl/layouts/partials/page/header.html
View File

@ -8,12 +8,13 @@
</a> </a>
</div> </div>
<div class="slider"> <div class="slider">
<img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}"> <img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="placeholder">
<img src="{{ relURL "img/banner/Banner-Show2016.jpg" }}" class="hidden"> <img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="slider-img">
<img src="{{ relURL "img/banner/Banner2019.jpg" }}" class="hidden"> <img src="{{ relURL "img/banner/Banner-Show2016.jpg" }}" class="hidden slider-img">
<img src="{{ relURL "img/banner/Fotobanner2.jpg" }}" class="hidden"> <img src="{{ relURL "img/banner/Banner2019.jpg" }}" class="hidden slider-img">
<img src="{{ relURL "img/banner/Paare_2019.jpg" }}" class="hidden"> <img src="{{ relURL "img/banner/Fotobanner2.jpg" }}" class="hidden slider-img">
<img src="{{ relURL "img/banner/slider-turnier.jpg" }}" class="hidden"> <img src="{{ relURL "img/banner/Paare_2019.jpg" }}" class="hidden slider-img">
<img src="{{ relURL "img/banner/slider-turnier.jpg" }}" class="hidden slider-img">
<div class="dots"> <div class="dots">
<div data-index="0" class="dot active"></div> <div data-index="0" class="dot active"></div>
<div data-index="1" class="dot"></div> <div data-index="1" class="dot"></div>

2
themes/tsc_vfl/static/js/slider.js
View File

@ -4,7 +4,7 @@ $(function () {
const delay = 7000 const delay = 7000
function showImage(idx) { function showImage(idx) {
// console.log("switching to index", idx) // console.log("switching to index", idx)
const imgs = $('#header .slider img') const imgs = $('#header .slider .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') const dots = $('#header .slider .dots .dot')