Modern Slider Background Image

[simonwr1976]

I am using the fullscreen slider preset and I’m trying to add a different background image for each slide, is it possible to add these image urls to the looper content? If not how do I create the slider to achieve this?

[ruenel]

Hello @simonwr1976,

Thanks for writing in!

You need to edit the JSON of the Looper Provider and add your background images for each slide into something like this:

[
  {
    "text"            : "This is a fullscreen slider.",
    "textColor"       : "#f6e82b",
    "backgroundColor" : "#213263",
    "backgroundimage" : "https://via.placeholder.com/1200x900.png?text=Background+Image+1"
  },
  {
    "text"            : "Content is centered on both axes.",
    "textColor"       : "#ffcfd6",
    "backgroundColor" : "#006451",
    "backgroundimage" : "https://via.placeholder.com/1200x900.png?text=Background+Image+2"
  },
  {
    "text"            : "Place anything you want in here.",
    "textColor"       : "#ef1e31",
    "backgroundColor" : "#ffcfd6",
    "backgroundimage" : "https://via.placeholder.com/1200x900.png?text=Background+Image+3"
  },
  {
    "text"            : "The choice is yours.",
    "textColor"       : "#213263",
    "backgroundColor" : "#ef1e31",
    "backgroundimage" : "https://via.placeholder.com/1200x900.png?text=Background+Image+4"
  }
]

And then, you need to edit your slide and enable the “Advanced” background option where you insert the background image using the {{dc:looper:field key="backgroundimage"}} dynamic content.

Kindly let us know how it goes.