Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Weitere InformationenFullscreen Slider
is fullwidth on small screens – best would be to give a
unique ID to that Slider :
f.e. united_slider
the media-query has a start on hamburger breakpoint – here on 990px
the images on the slider have : W= 1500px H=843px
so an aspect ratio of 0.56 resulting here in the css code to an image-height of 56vw
By the way: This CSS code is the only one needed to achieve the result of a fullwidth appearance.
@media only screen and (max-width:989px) {
#united_slider .avia-slideshow.av_fullscreen {
width: 100vw !important;
height: 56vw !important;
}
}this is just for positioning the header on bigger screens.
@media only screen and (min-width: 990px) {
.page-id-35721 #header {
bottom: 30px;
}
#top.page-id-35721 .av_header_glassy.av_header_transparency .header_bg {
opacity: 0.4 !important;
background-color: #000;
}
}Slider Move to above the header
as a result of a request on the board
this is a little debouncing function ( for resize events )
for scroll events a throttling function would be better
function add_debounce_function(){
?>
<script>
function debounce(fn, delay) {
var timer = null;
return function () {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
</script>
<?php
}
add_action('wp_footer', 'add_debounce_function');In this case only for this Page-ID – with the debounce function from above the window width is measured every 50ms.
function slider_before_header(){
if(is_page(35721)) {
?>
<script>
(function($){
var fullscreenSlider = $("#united_slider.avia-fullscreen-slider");
fullscreenSlider.clone().detach();
$(window).on('load resize', debounce(function (event) {
var winWidth = $(window).width();
if (winWidth < 990) {
$("#main").prepend(fullscreenSlider);
}
else {
$("#wrap_all").prepend(fullscreenSlider);
}
}, 50));
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'slider_before_header');