Klicken Sie auf den unteren Button, um den Inhalt von zu laden.
Fullscreen 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');