Background image looper provider not working

[maryb43]

I’m trying to do super basic background slides. I have 4 images I want to use in the background.

https://prothemesandbox.com/slider/

I’m using “backgroundimage” as a field key in lower layer of the section background setting

{{dc:looper:field key=“backgroundimage”}}

I added the following placeholder images to JSON looper provider:

[
{
“backgroundimage” : “https://via.placeholder.com/1200x600.png?text=Background+Image+1”
},
{
“backgroundimage” : “https://via.placeholder.com/1200x600.png?text=Background+Image+2”
},
{
“backgroundimage” : “https://via.placeholder.com/1200x600.png?text=Background+Image+3”
},
{
“backgroundimage” : “https://via.placeholder.com/1200x600.png?text=Background+Image+4”
}
]

If I add a Looper Consumer and select “all”, I can see the images but they’re stacked on top of each other.

If I add a Looper Consumer and select “one”, I can see the first image but not the other 3.

[tristup]

Hi @maryb43,

Thanks for reaching out.
I have checked the page and found that you applied the Looper Provider and the Looper Consumer to the Section. The Looper Consumer will loop the elements based on its provider, so you need to use it in any of the child elements, I have set it to the column and it shows the background images. But to make that slider, you need to use the Slider Container and other slider elements.

If I am not wrong, you are trying to build some Hero Slider, if that is the case, you can purchase the Modern Slider Course & Expansion Pack, and use any of the Preset Slider available with it. You can find more information on Modern Slider in the following link.

https://theme.co/modern-sliders/ [ Specifically: Hero Posts Slider]

Thanks

[maryb43]

Do I have to buy modern sliders to have static text over a couple of background images? This is what I’m trying to do: https://andersonroof.com/

[ruenel]

Hello @maryb43,

No, you don’t. Actually, you have created a Section that displays 1 Column Row with a background image and Text element in it. If you want to create slides, use the new Slider element.

• https://theme.co/docs/sliders

Check out my example on the page.

Thanks.