{"id":3958,"date":"2023-07-12T22:49:04","date_gmt":"2023-07-12T20:49:04","guid":{"rendered":"https:\/\/www.knowboard.de\/?p=3958"},"modified":"2023-07-23T14:17:34","modified_gmt":"2023-07-23T12:17:34","slug":"total-theme-full-screen-sliders","status":"publish","type":"post","link":"https:\/\/www.knowboard.de\/total-theme-full-screen-sliders\/","title":{"rendered":"Total theme full screen sliders"},"content":{"rendered":"\n

There are two option: PHP and CSS. I tend to use the CSS variant as it gives me more flexibility.<\/p>\n\n\n\n

\/\/force fullscreen to all sliders\nadd_filter( 'vcex_image_flexslider_data_attributes', function( $attrs ) {\n    $attrs[] = 'data-force-size=\"fullWindow\"';\n    return $attrs;\n} );\n\n\/\/force fullscreen by adding class \"hero\" to slider \nadd_filter( 'vcex_image_flexslider_data_attributes', function( $data, $shortcode_atts ) {\n    if ( isset( $shortcode_atts['classes'] ) && strpos( $shortcode_atts['classes'], 'hero' ) !== false ) {\n        $data[] = 'data-force-size=\"fullWindow\"';\n    }\n    return $data;\n}, 10, 2 );<\/code><\/pre>\n\n\n\n

Alternatively some CSS<\/p>\n\n\n\n

\n\/*SLIDER GRADIENT TOP ON HOME (give elemnt hero class so only this is triggered)*\/\n\/*.sp-slides-container,*\/\n.wpex-slider.hero:before {\n\tcontent: \" \";\n\tbackground: linear-gradient(180deg,rgb(20 22 24 \/ 50%) 0%,rgb(20 22 24 \/ 20%) 50%,rgba(111,202,219,0) 100%);\n\t\/*display: block; *\/\n\tposition: absolute;\n\twidth: 100%;\n\tz-index: 1;\n}\n\/*SLIDER: DISBLE IMAGE LINK*\/\n.slider-pro a.wpex-slider-media-link {\n\tpointer-events: none;\n\tcursor: default;\n}\n\n.wpex-slider.hero .wpex-slider-media img {\n\twidth: 100%;\n\t\/*\n\tanimation: move 40s ease infinite;\n\t-ms-animation: move 40s ease infinite;\n\t-webkit-animation: move 40s ease infinite;\n\t-0-animation: move 40s ease infinite;\n\t-moz-animation: move 40s ease infinite;\n\tposition: absolute;\n\t*\/\n}\n\n.wpex-slider.hero .wpex-slider-media {\n\twidth: 100%;\n\theight: 100vh;\n\tmargin: 0 auto;\n\toverflow: hidden;\n\tposition: relative;\n\t\/*height: calc(100vh - 100px); --wpex-main-nav-height wieso hatte cih da -100px? *\/\n}\n\n.wpex-slider.hero .wpex-slider-preloaderimg img, \n.wpex-slider.hero .wpex-slider-media img {\n\theight: 100vh;\n\t\/*height: calc(100vh - 100px); --wpex-main-nav-height.  height: 100vh;*\/\n\tobject-fit: cover;\n}\n\n\n\/*ALIDER ANIMATION ZOOM*\/\n\/*\n@-webkit-keyframes move {\n0% {\n-webkit-transform-origin: bottom center;\n-moz-transform-origin: bottom center;\n-ms-transform-origin: bottom center;\n-o-transform-origin: bottom center;\ntransform-origin: bottom center;\n\ntransform: scale(1.0); \n-ms-transform: scale(1.0);\n-webkit-transform: scale(1.0);\n-o-transform: scale(1.0);\n-moz-transform: scale(1.0);\n}\n50% {\ntransform: scale(1.2);\n-ms-transform: scale(1.2);\n-webkit-transform: scale(1.2);\n-o-transform: scale(1.2);\n-moz-transform: scale(1.2);\nanimation-timing-function: ease-in;\n\n}\n100% {\n-webkit-transform-origin: bottom right;\n-moz-transform-origin: bottom right;\n-ms-transform-origin: bottom right;\n-o-transform-origin: bottom right;\ntransform-origin: bottom right;\n\ntransform: scale(1.0); \n-ms-transform: scale(1.0);\n-webkit-transform: scale(1.0);\n-o-transform: scale(1.0);\n-moz-transform: scale(1.0);\n}\n}\n*\/\n\/*was scale3d  rotate(0.1deg)*\/<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"

There are two option: PHP and CSS. I tend to use the CSS variant as it gives me more flexibility. Alternatively some CSS<\/p>\n","protected":false},"author":1,"featured_media":4007,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[61,6],"tags":[],"class_list":["post-3958","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-total-theme","category-wordpress","entry","has-media"],"_links":{"self":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts\/3958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/comments?post=3958"}],"version-history":[{"count":2,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts\/3958\/revisions"}],"predecessor-version":[{"id":3963,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/posts\/3958\/revisions\/3963"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/media\/4007"}],"wp:attachment":[{"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/media?parent=3958"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/categories?post=3958"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.knowboard.de\/wp-json\/wp\/v2\/tags?post=3958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}