Skip to content

Total theme full screen sliders

person in black and white t-shirt using computer

There are two option: PHP and CSS. I tend to use the CSS variant as it gives me more flexibility.

//force fullscreen to all sliders
add_filter( 'vcex_image_flexslider_data_attributes', function( $attrs ) {
    $attrs[] = 'data-force-size="fullWindow"';
    return $attrs;
} );

//force fullscreen by adding class "hero" to slider 
add_filter( 'vcex_image_flexslider_data_attributes', function( $data, $shortcode_atts ) {
    if ( isset( $shortcode_atts['classes'] ) && strpos( $shortcode_atts['classes'], 'hero' ) !== false ) {
        $data[] = 'data-force-size="fullWindow"';
    }
    return $data;
}, 10, 2 );

Alternatively some CSS


/*SLIDER GRADIENT TOP ON HOME (give elemnt hero class so only this is triggered)*/
/*.sp-slides-container,*/
.wpex-slider.hero:before {
	content: " ";
	background: linear-gradient(180deg,rgb(20 22 24 / 50%) 0%,rgb(20 22 24 / 20%) 50%,rgba(111,202,219,0) 100%);
	/*display: block; */
	position: absolute;
	width: 100%;
	z-index: 1;
}
/*SLIDER: DISBLE IMAGE LINK*/
.slider-pro a.wpex-slider-media-link {
	pointer-events: none;
	cursor: default;
}

.wpex-slider.hero .wpex-slider-media img {
	width: 100%;
	/*
	animation: move 40s ease infinite;
	-ms-animation: move 40s ease infinite;
	-webkit-animation: move 40s ease infinite;
	-0-animation: move 40s ease infinite;
	-moz-animation: move 40s ease infinite;
	position: absolute;
	*/
}

.wpex-slider.hero .wpex-slider-media {
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	/*height: calc(100vh - 100px); --wpex-main-nav-height wieso hatte cih da -100px? */
}

.wpex-slider.hero .wpex-slider-preloaderimg img, 
.wpex-slider.hero .wpex-slider-media img {
	height: 100vh;
	/*height: calc(100vh - 100px); --wpex-main-nav-height.  height: 100vh;*/
	object-fit: cover;
}


/*ALIDER ANIMATION ZOOM*/
/*
@-webkit-keyframes move {
0% {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;

transform: scale(1.0); 
-ms-transform: scale(1.0);
-webkit-transform: scale(1.0);
-o-transform: scale(1.0);
-moz-transform: scale(1.0);
}
50% {
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
animation-timing-function: ease-in;

}
100% {
-webkit-transform-origin: bottom right;
-moz-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-o-transform-origin: bottom right;
transform-origin: bottom right;

transform: scale(1.0); 
-ms-transform: scale(1.0);
-webkit-transform: scale(1.0);
-o-transform: scale(1.0);
-moz-transform: scale(1.0);
}
}
*/
/*was scale3d  rotate(0.1deg)*/

Dieser Beitrag hat 0 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

An den Anfang scrollen