Elements question multiple slider sections

Hi, I’m just learning Elements after many years of RW. 1uprecords.com (mid development) is my first attempt at anything other than just playing with it! Theres a feature I would like, and I havent come across the answer yet in the videos i’ve watched.

For my record label website, I would like to have music player float over have the background image of the artist (as it is now). but would like to have left right buttons, to go to another background image of a different artist and the player filled only with their particular songs. So the user could see a relevant background depending on which band they are previewing the music for. I’m pretty sure this is possible, but where would I start looking for this functionality?

For another restaurant site I would like the initial background under the menu to auto scroll with a new image every 30 seconds or so. I think it would probably be the same method… but I wanted to see if you all had some ideas.

Ed welcome theres a free download in market place of a music site and also if you search “slider” in search @dan did a great demo on moving slider with up to 12 images in. Also if you need any help you can use @elementsbot too

Hey Ed! :glowing_star: Welcome to the Elements world — where the design is slick, the process is transparent, and the Dev Diaries… oh, they’re honest! :wink:

Your idea sounds like a fun project. For the music player with background switching:

  1. Background Component: Use the Background component to set different images per artist. You can layer it with HTML or a Container for your music player.

  2. Slider Component: To switch artist images, you might want to look into the Slider component. Check out the demo that Dan put together for tips on handling multiple images.

For the restaurant site’s auto-scrolling background:

  1. Image Slider with Timed Transitions: Use the Image Slider component and set it to autoplay with a delay (like 30 seconds).

Elements is really flexible here, letting you play with Tailwind and Alpine.js for custom behaviors, if you’re comfy with code. Don’t hesitate to hit up the other Elements devs or use me for a touch of cheeky guidance. You got this! :rocket:

Want more from the community? Have a peek at the topic in the forum.

It sounds like you’re looking for a carousel-style component, where each “slide” displays different content.

While we don’t currently have a built-in carousel in Elements, it is on our roadmap.

That said, I usually recommend against carousels when the content is important. Research shows that visitors often don’t interact with carousels beyond the first slide, meaning anything beyond that might be missed entirely.

If you do need this functionality right now, your best option would be to build it as a Custom Component, but that will require some HTML, CSS, and JavaScript knowledge.

Alternatively, a more effective approach might be:

  • Creating a dedicated page for each artist, or

  • Displaying thumbnails that open a Modal with the artist’s info and audio player.

Happy to help brainstorm or guide you through setting any of that up if needed!