Make a Slideshow with array of images

RE: Make a Slideshow with array of images

David Jimenez — Fri, 04 Oct 2024 08:04:01 GMT

YOu can do it, byt it will change each 30 seconds (not 10)

a!localVariables( local!indexBanner: a!refreshVariable( value: if(rand()>0.5, 1, -1), refreshInterval: 0.5), local!listaBanner: { { id: 5, urlImagemMobile: "">asset.gecdesigns.com/.../beautiful-fantasy-wallpaper-ultra-hd-wallpaper-4k-sr10012418-1706506236698-cover.webp", urlImagemTablet: "">asset.gecdesigns.com/.../beautiful-fantasy-wallpaper-ultra-hd-wallpaper-4k-sr10012418-1706506236698-cover.webp", urlImagemDesktop: "">asset.gecdesigns.com/.../beautiful-fantasy-wallpaper-ultra-hd-wallpaper-4k-sr10012418-1706506236698-cover.webp", }, { id: 6, urlImagemMobile: "">wallpapercrafter.com/.../108198-purple-nature-colorful-trees-forest-smoke-mist-artwork.jpg", urlImagemTablet: "">wallpapercrafter.com/.../108198-purple-nature-colorful-trees-forest-smoke-mist-artwork.jpg", urlImagemDesktop: "">wallpapercrafter.com/.../108198-purple-nature-colorful-trees-forest-smoke-mist-artwork.jpg", }, }, a!headerContentLayout( header: { /*BANNER*/ a!billboardLayout( backgroundMedia: a!webImage( source: if( or( a!isPageWidth("PHONE"), a!isPageWidth("TABLET_PORTRAIT") ), local!listaBanner[local!indexBanner].urlImagemMobile, local!listaBanner[local!indexBanner].urlImagemDesktop ) ), backgroundColor: "#f0f0f0", marginBelow: "NONE", overlay: a!barOverlay( contents: { a!sideBySideLayout( items: { a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon( icon: "angle-left-bold", link: a!dynamicLink( value: if( local!indexBanner > 1, local!indexBanner - 1, length(local!listaBanner) ), saveInto: local!indexBanner ), linkStyle: "STANDALONE", color: "#ffffff", size: "LARGE" ) } ) ), a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon( icon: "angle-right-bold", link: a!dynamicLink( value: if( length(local!listaBanner) > local!indexBanner, local!indexBanner + 1, 1 ), saveInto: local!indexBanner ), linkStyle: "STANDALONE", color: "#ffffff", size: "LARGE" ) }, align: "RIGHT" ) ) }, showWhen: a!isNotNullOrEmpty(local!listaBanner) ) }, style: "NONE" ) ) }, ) )

RE: Make a Slideshow with array of images

David Jimenez — Fri, 04 Oct 2024 08:03:01 GMT

YOu can do it using refreshvariables, but only each 30 seconds...

a!localVariables(

local!indexBanner: a!refreshVariable(
value: if(rand()>0.5, 1, -1),
refreshInterval: 0.5),

local!listaBanner: {
{
id: 5,
urlImagemMobile: "">asset.gecdesigns.com/.../beautiful-fantasy-wallpaper-ultra-hd-wallpaper-4k-sr10012418-1706506236698-cover.webp",
urlImagemTablet: "">asset.gecdesigns.com/.../beautiful-fantasy-wallpaper-ultra-hd-wallpaper-4k-sr10012418-1706506236698-cover.webp",
urlImagemDesktop: "">asset.gecdesigns.com/.../beautiful-fantasy-wallpaper-ultra-hd-wallpaper-4k-sr10012418-1706506236698-cover.webp",

},
{
id: 6,
urlImagemMobile: "">wallpapercrafter.com/.../108198-purple-nature-colorful-trees-forest-smoke-mist-artwork.jpg",
urlImagemTablet: "">wallpapercrafter.com/.../108198-purple-nature-colorful-trees-forest-smoke-mist-artwork.jpg",
urlImagemDesktop: "">wallpapercrafter.com/.../108198-purple-nature-colorful-trees-forest-smoke-mist-artwork.jpg",

},
a!headerContentLayout(
header: {
/*BANNER*/
a!billboardLayout(
backgroundMedia:
a!webImage(
source: if(
or(
a!isPageWidth("PHONE"),
a!isPageWidth("TABLET_PORTRAIT")
),
local!listaBanner[local!indexBanner].urlImagemMobile,
local!listaBanner[local!indexBanner].urlImagemDesktop
)
),
backgroundColor: "#f0f0f0",

marginBelow: "NONE",
overlay: a!barOverlay(
contents: {
a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: {
a!richTextIcon(
icon: "angle-left-bold",
link: a!dynamicLink(
value: if(
local!indexBanner > 1,
local!indexBanner - 1,
length(local!listaBanner)
),
saveInto: local!indexBanner
),
linkStyle: "STANDALONE",
color: "#ffffff",
size: "LARGE"
)
}
)
),
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: {
a!richTextIcon(
icon: "angle-right-bold",
link: a!dynamicLink(
value: if(
length(local!listaBanner) > local!indexBanner,
local!indexBanner + 1,
1
),
saveInto: local!indexBanner
),
linkStyle: "STANDALONE",
color: "#ffffff",
size: "LARGE"
)
},
align: "RIGHT"
)
)
},
showWhen: a!isNotNullOrEmpty(local!listaBanner)
)
},
style: "NONE"
)
)
},
)

)