From 3c9ef3c65008247dd475156f40c42e99d1400ac0 Mon Sep 17 00:00:00 2001 From: jan Date: Mon, 30 Sep 2024 10:15:40 +0200 Subject: [PATCH] slideshow arrows --- site/assets/js/utils/slideshows.js | 14 ++++-------- site/assets/scss/components/_flickity.scss | 26 ++++++++++++++++++++-- site/assets/scss/layouts/_faq.scss | 25 +-------------------- site/layouts/shortcodes/faq-slider.html | 18 +-------------- site/layouts/shortcodes/slideshow.html | 18 +-------------- site/layouts/ueber-uns/list.html | 2 ++ 6 files changed, 33 insertions(+), 70 deletions(-) diff --git a/site/assets/js/utils/slideshows.js b/site/assets/js/utils/slideshows.js index c5c6e7f..78be67c 100644 --- a/site/assets/js/utils/slideshows.js +++ b/site/assets/js/utils/slideshows.js @@ -11,7 +11,7 @@ export default function() { var flkty = new Flickity(el.querySelector('.carousel'), { //lazyLoad: 2, - prevNextButtons: false, + prevNextButtons: true, pageDots: false, // autoPlay: $this.hasClass('auto-play') ? 3000 : false, wrapAround: true , @@ -41,13 +41,7 @@ export default function() { carouselCaption.textContent = el.querySelector('.is-selected .caption').textContent ? el.querySelector('.is-selected .caption').textContent : el.querySelector('.carousel-cell:first-child .caption').textContent; }); - el.querySelector('.button-previous').addEventListener( 'click', function() { - flkty.previous(); - }); - // next - el.querySelector('.button-next').addEventListener( 'click', function() { - flkty.next(); - }); + }); @@ -59,7 +53,7 @@ export default function() { var flkty = new Flickity(carouselCommunity, { //lazyLoad: 2, - prevNextButtons: false, + prevNextButtons: true, pageDots: false, // autoPlay: $this.hasClass('auto-play') ? 3000 : false, wrapAround: false , @@ -116,7 +110,7 @@ export default function() { window.requestAnimationFrame(_updateTicker2); }; - //_updateTicker2(); + _updateTicker2(); } diff --git a/site/assets/scss/components/_flickity.scss b/site/assets/scss/components/_flickity.scss index d8c7d7c..1aaf222 100644 --- a/site/assets/scss/components/_flickity.scss +++ b/site/assets/scss/components/_flickity.scss @@ -56,8 +56,30 @@ z-index: 2; } -.button-previous svg { - transform: rotate(180deg); +.flickity-button { + background: transparent; + border: none; + color: #fff; + mix-blend-mode: difference; + + transition: all 0.2s ease; + + &:hover { + background: #fff; + color: #000; + } + + &:disabled { + display: none ; + } + + &:focus { + box-shadow: none; + } + + @include media-breakpoint-down(sm) { + display: none; + } } .entry-content { diff --git a/site/assets/scss/layouts/_faq.scss b/site/assets/scss/layouts/_faq.scss index 6acac75..c347cb9 100644 --- a/site/assets/scss/layouts/_faq.scss +++ b/site/assets/scss/layouts/_faq.scss @@ -52,29 +52,6 @@ padding-right: 2rem; } - .flickity-prev-next-button { - @include media-breakpoint-down(sm) { - display: none; - } - - box-shadow: none !important; - border-radius: 0; - background: var(--primary-opaque-light); - width: 40px; - height: 40px; - //opacity: 0.9; - - &.previous { - left: -1rem; - } - &.next { - right: -1rem; - } - - polygon { - fill: var(--primary); - } - } - + } \ No newline at end of file diff --git a/site/layouts/shortcodes/faq-slider.html b/site/layouts/shortcodes/faq-slider.html index 0b4b766..f5c7bd1 100644 --- a/site/layouts/shortcodes/faq-slider.html +++ b/site/layouts/shortcodes/faq-slider.html @@ -3,21 +3,5 @@ {{ .Inner }}
- - + \ No newline at end of file diff --git a/site/layouts/shortcodes/slideshow.html b/site/layouts/shortcodes/slideshow.html index 35c1742..99088c8 100644 --- a/site/layouts/shortcodes/slideshow.html +++ b/site/layouts/shortcodes/slideshow.html @@ -4,21 +4,5 @@
- - + \ No newline at end of file diff --git a/site/layouts/ueber-uns/list.html b/site/layouts/ueber-uns/list.html index aa0882e..21ef339 100644 --- a/site/layouts/ueber-uns/list.html +++ b/site/layouts/ueber-uns/list.html @@ -100,6 +100,8 @@

{{ .text | markdownify }}

{{ end }} {{ end }} + + {{ end }}