Use span_1_of_1 until span_1_of_8. You can combine it like this. It might require enym plugin,…
Total theme full screen sliders
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