Custom Swiper Example
Hier habe ich mich inspirieren lassen: https://codesandbox.io/s/swiper-effect-coverflow
... und so habe ich es im ausgelagertem Template umgesetzt:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:t3sb="http://typo3.org/ns/T3SBS/T3sbootstrap/ViewHelpers" data-namespace-typo3-fluid="true">
<f:asset.css identifier="swipercss-{data.uid}">
#mySwiper.swiper-container {
position: relative;
}
#mySwiper .swiper-slide {
background-position: center;
background-size: cover;
width: 60%;
height: 70vh;
border-radius: 8px;
overflow: hidden;
}
#mySwiper .slide-content {
position: absolute;
left: 0;
width: 100%;
bottom: 0;
padding: 10rem 2rem 1rem;
box-sizing: border-box;
background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.90));
border-radius: 8px;
color: #fff;
}
#mySwiper img {
border-radius: 8px;
}
#mySwiper .swiper-slide-shadow-left img,
#mySwiper .swiper-slide-shadow-right img {
overflow:hidden;
}
</f:asset.css>
<f:asset.script identifier="vanilla_swiperjs-{data.uid}">
var swiper = new Swiper('#mySwiper', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
loopedSlides: 10,
loop: true,
auto: true,
loopAdditionalSlides: 1,
autoplay: {
delay: 3000,
disableOnInteraction: false
},
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 100,
modifier: 3,
slideShadows: true
},
pagination: {
el: '.swiper-pagination'
}
});
</f:asset.script>
<div id="mySwiper" class="swiper-container mx-auto my-5" style="overflow: hidden">
<div class="swiper-wrapper">
<f:for each="{col_300}" as="slide">
<div class="swiper-slide">
<f:render section="Image" arguments="{ratio: '{ratio}', file: '{swiperSlides.{slide.uid}.0}', width: '{width}'}" />
<div class="slide-content ">
<h2 class="text-white">{slide.header}</h2>
{slide.bodytext -> f:format.html()}
</div>
</div>
</f:for>
<div class="swiper-pagination"></div>
</div>
</div>
</html>
<f:section name="Image">
<figure class="image{f:if(condition: file.properties.tx_t3sbootstrap_extra_class, then: ' {file.properties.tx_t3sbootstrap_extra_class}')}">
<t3sb:media file="{file}"
title="{file.title}" alt="{f:if(condition: file.alternative, then: '{file.alternative}', else: 'image-{file.uid}')}"
class="img-fluid d-block{f:if(condition: file.properties.tx_t3sbootstrap_extra_imgclass, then: ' {file.properties.tx_t3sbootstrap_extra_imgclass}')}"
width="{width}"
height="auto"
breakpoints="{
0: {'cropVariant': 'default', 'media': '(min-width: 1200px)', 'srcset': '{settings.srcsetDesktop}'},
1: {'cropVariant': 'tablet', 'media': '(min-width: 576px)', 'srcset': '{settings.srcsetTablet}'},
2: {'cropVariant': 'mobile', 'media': '(max-width: 575px)', 'srcset': '{settings.srcsetMobile}'}
}"
picturefill="{settings.picturefill}"
lazyload="0"
ratio="{ratio}"
/>
</figure>
</f:section>