Skip to content
Flex XL Ministory Recipes
Crossfade (Desktop)
Please make sure to copy the following css into the CustomCSS box. update the image url with the image of the slides. if the image lives within google bucket, please use the static urls for the images.
Custom CSS below
#LeftArrowBtn { pointer-events: none; }
.leftBtn,
.rightBtn{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 999;
pointer-events: auto;
cursor: pointer;
}
.nav-hs { pointer-events: none; }
#galleryImgContainer { visibility: hidden;}
#slideCopyContainer.slideCopyContainer-style {
width: 100%;
left: 0px;
max-width: unset;
}
#desktopLogo.logo-desktop-style { left: 640px; }
#slideCopyContainer.slideCopyContainer-style .frame-copy-style {
width: calc(100% - 600px);
left: 600px;
}
.newImage {
width: 600px;
height: 600px;
background-position: 50% 50%;
background-size: cover;
position: absolute;
left: 0px;
top: 0px;
}
.newImage-0 { background-image:url(" image url goes here ");}
.newImage-1 { background-image:url(" image url goes here ");}
.newImage-2 { background-image:url(" image url goes here ");}
.newImage-3 { background-image:url(" image url goes here ");}
.newImage-4 { background-image:url(" image url goes here ");}
.newImage-5 { background-image:url(" image url goes here ");}
@media screen and (max-width: 970px) {
.stageStyle .adContainerStyle .galleryContainerStyle .slideCopyContainer-style {
top: 0px;
height: 600px;
}
.copy-slide-style {
display: flex;
flex-direction: column;
}
.newImage {
height: 300px;
position: relative;
width: 728px;
}
#slideCopyContainer.slideCopyContainer-style .frame-copy-style {
width: 100%;
left: 0px;
z-index: 9;
height: 300px;
top: 300px;
}
}
Please copy and paste the following custom js code into the CustomJS box. there is no need to change this.
Custom JS below:
function overwriteTransition () {
let leftBtn = document.createElement("div");
leftBtn.classList.add("leftBtn");
document.querySelector("#LeftArrowBtn").appendChild(leftBtn);
let rightBtn = document.createElement("div");
rightBtn.classList.add("rightBtn");
document.querySelector("#RightArrowBtn").appendChild(rightBtn);
let AllSlides = document.getElementsByClassName("copy-slide-style");
for (var i = 0; i < AllSlides.length; i++ ) {
let tempItem = document.getElementsByClassName("copy-slide-style")[i];
let newImage = document.createElement("div");
newImage.classList.add("newImage","newImage-" + i);
tempItem.appendChild(newImage);
}
}
window.addEventListener("load", (event) => { overwriteTransition ();});
Example Ad:
If you need to see how this code has been implemented, please use the below ad as reference.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.