Header Slider
Für unseren Header Slider, verwenden wir «slick» (https://kenwheeler.github.io/slick/).
Beispiel siehe unter Home.
Einstellungen
- Slider: Autoplay und Geschwindigkeit
- Slides: Zufällige Reihenfolge
- Mobile: Bild fluid, auto-height (Klasse .mobile-nobg wird bei .slide-img hinzugefügt)
- Inhalt: Bild oder Video, Caption mit oder ohne Link
<section class="header-slider full-width">
<div class="slick-head slick-slider" data-slick="{"autoplay":1, "autoplaySpeed": 5000}">
<div class="slide">
<div class="slide-img mobile-nobg" style="background-image: url(index.php?rex_media_type=slider&rex_media_file=teilch_werbeagentur-zurich_0.jpg);">
<span class="sr-only">Werbeagentur</span>
</div>
<img class="img-fluid mobile-img" src="index.php?rex_media_type=slider-xs&rex_media_file=teilch_werbeagentur-zurich_0.jpg" alt="Werbeagentur">
<div class="caption">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Lorem ipsum</h1><p>consetetur sadipscing elitr</p><p><a class="s-link" href="/ap/base18/kontakt/" >Mehr lesen</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(index.php?rex_media_type=slider&rex_media_file=ph_basis2.jpg);">
<div class="slider-embed">
<iframe type="text/html" width="720" height="405" src="https://www.youtube.com/embed/W0LHTWG-UmQ?autoplay=1&controls=0&mute=1&loop=1&playsinline=1&color=white" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="caption">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">dolor sit amet</h1>
<p>tempor invidunt ut labore et dolore magna</p>
<p>
<a class="s-link" href="https://www.youtube.com" target="_blank">zu Youtube</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Init
function buildSlider(sliderItem) {
// not on mobile, if fluid img on mobile
if (matchMedia('only screen and (min-width: 768px)').matches) {
if (sliderItem.length > 0) {
// % window height
sliderItem.height($(window).height() * 0.65);
}
}
}
buildSlider(sliderItem);
$(window).resize(function() {
buildSlider(sliderItem);
});
var slickHead = $('.slick-head');
// caption fades on init
$('.slick-head').on('init', function(event, slick){
setTimeout(function(){
$('.slick-active .caption').css('opacity', 1);
}, 500);
});
// autoplay and speed from html data-attr.(data-slick)
$(slickHead).slick({
slidesToShow: 1,
arrows: false,
dots: true,
});
// caption fades
$(slickHead).on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.slick-active .caption').css('opacity', 0);
});
$(slickHead).on('afterChange', function(event, slick, currentSlide, nextSlide){
setTimeout(function(){
$('.slick-current .caption').css('opacity', 1);
}, 200);
});
SASS
/* _slider.scss */
.slide-img {
background-position: center;
background-size: cover;
z-index: -99; /* slider mit jarallax - safari fix absolute caption */
&.mobile-nobg { /* if mobile-img active, no bg */
@include media-breakpoint-down(sm) {
display: none!important;
}
}
}
/* responsive (embed-)video */
.slider-video {
@include media-breakpoint-down(sm) {
/* responsive video wrap */
@include responisveWrap;
}
@include media-breakpoint-up(md) {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
video {
/* cover effect bg embed-video */
@include media-breakpoint-up(md) {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/* responsive embed-video */
@include media-breakpoint-down(sm) {
@include responisveContent;
}
}
}
.slider-embed {
/* responsive embed-video */
@include responisveWrap;
/* cover effect bg embed-video */
@include media-breakpoint-up(md) {
padding: 0;
height: 100%;
}
iframe {
/* cover effect bg embed-video */
@include media-breakpoint-up(md) {
box-sizing: border-box;
height: 56.25vw;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
width: 177.77777778vh;
}
/* responsive embed-video */
@include media-breakpoint-down(sm) {
@include responisveContent;
}
}
}
@mixin responisveWrap {
position: relative;
width: 100%;
height: auto;
padding-bottom: 56.25%;
overflow: hidden;
}
@mixin responisveContent {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}