[fritzmg/contao-swiper] - mit Logo als overlay
Hallo,
ich habe hier [fritzmg/contao-swiper] im Einsatz und möchte über den Slider ein transparentes Logo setzen.
Damit wird aber (in meinem Fall) der prev-Link nicht mehr anklickbar, weil wohl das Bild drüber liegt
Ich habe hierzu ein <div.bg-logo> eingezogen
PHP-Code:
// ce_swiperStop.html5
<?php $this->extend('ce_swiperStop'); ?>
<?php $this->block('controls'); ?>
<?php if ($this->sliderPagination): ?>
<div class="swiper-pagination"></div>
<?php endif; ?>
<div class="bg-logo"></div> <!-- my transparent logo -->
<?php if ($this->sliderButtons): ?>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<?php endif; ?>
<?php if ($this->sliderScrollbar): ?>
<div class="swiper-scrollbar"></div>
<?php endif; ?>
<?php $this->endblock(); ?>
HTML-Code:
#swiper {
.bg-logo {
position: relative;
&::after {
content: '';
position: absolute;
z-index: 5;
background-image: url(/files/ccc/assets/img/logo-20perc.png);
background-repeat: no-repeat;
background-size: contain;
width: 100vw;
height: 100vw;
top: -10%;
left: -25%;
}
}
}
Nun wäre mein Ansatz gewesen, die Sichtbarkeit und Verfügbarkeit des prev-Links über den z-index zu lösen:
.swiper-wrapper hat z-index 1
.bg-logo erhält von mir z-index 5
.swiper-button-next, .swiper-button-prev haben z-index 10
Trotzdem bleibt der prev-link nicht verfügbar.
Haben wir CSS-Profis hier, die mir hier weiterhelfen könnten?
