I just purchased LayerSlider 7 and I'm wondering if there's a recommended way to achieve what I’m trying to build, or if there's an existing template I can work from.
I'm a composer and I’d like to showcase demo playlists on my website, organized by genre, such as action, comedy, thriller, etc. My idea is to use a visual slider with cinematic images representing each genre, where users can swipe or click through the slides and listen to audio demos for each one.
Ideally, I'd like to embed an audio player in each slide from SoundCloud (through iframe) or the Sonaar.io MP3 player (which uses a shortcode for embedding).
My questions are:
Does LayerSlider support WordPress shortcodes within slide content, or would I need to embed the player manually via HTML?
Is there a native or recommended method to integrate audio playlists per slide?
Are there any pre-made templates or examples for this kind of audio demo slider that I could start from?
Thanks for your help, just trying to figure out the best approach with LayerSlider for this use case.
Thanks so much for reaching out, and congratulations on your purchase of LayerSlider 7 — we're excited to see what you'll create!
Your idea of showcasing genre-based audio demos with cinematic visuals sounds fantastic, and LayerSlider can definitely help bring that to life.
To answer your questions:
1. Shortcode Support: Yes, LayerSlider fully supports WordPress shortcodes. You can add them using an HTML layer — just insert your shortcode (like [sonaar_player id="123"]) directly into the layer content, and it will render properly on the frontend.
2. Iframe Support: SoundCloud iframes and other embedded players (like Sonaar.io) can also be added manually via HTML layers using standard HTML/iframe code. Just note: since these are third-party embeds, their styling is often locked. However, you can assign a custom CSS class to your HTML layer (via the layer's “Attributes” settings), and then target that class in your custom CSS. That gives you some control over layout and appearance — though a basic understanding of CSS will definitely help here.
3. Playlist Per Slide: While there's no native audio playlist integration per slide, your approach of embedding players (either via shortcode or iframe) in individual slides is fully supported. You can easily create one slide per genre, each with a cinematic image background and an embedded player.
4. Templates: Currently, we don't have a pre-made template specifically for audio demo sliders. However, we do offer various creative slider templates that can be customized for your use case.
Wishing you the best with your site and music demo slider!
Thank you so much for your prompt response, you’ve helped me immensely! I’ve spent some time this past week working on it, and I think I’ve created something that’s working well. Of course, there’s room for improvement as I’m still learning, but with your guidance and the excellent templates that were available, I’ve put together something really cool to showcase (I think anyway!).
I also have a question about something I’m trying to achieve. I have one slider for each demo “genre,” but I’m wondering how to change background images or objects within an individual slider — basically a slider within a slider.
For example, in my “games” genre demo, I’d like to feature one game as the background and main object initially, then about 10-15 seconds in, transition naturally to a different background/object, and after the loop ends, return to the first set. Is this kind of sequence possible?
Hi,
I just purchased LayerSlider 7 and I'm wondering if there's a recommended way to achieve what I’m trying to build, or if there's an existing template I can work from.
I'm a composer and I’d like to showcase demo playlists on my website, organized by genre, such as action, comedy, thriller, etc. My idea is to use a visual slider with cinematic images representing each genre, where users can swipe or click through the slides and listen to audio demos for each one.
Ideally, I'd like to embed an audio player in each slide from SoundCloud (through iframe) or the Sonaar.io MP3 player (which uses a shortcode for embedding). My questions are:
Does LayerSlider support WordPress shortcodes within slide content, or would I need to embed the player manually via HTML?
Is there a native or recommended method to integrate audio playlists per slide?
Are there any pre-made templates or examples for this kind of audio demo slider that I could start from?
Thanks for your help, just trying to figure out the best approach with LayerSlider for this use case.
Cheers,
Dillon
Hi Dillon,
Thanks so much for reaching out, and congratulations on your purchase of LayerSlider 7 — we're excited to see what you'll create!
Your idea of showcasing genre-based audio demos with cinematic visuals sounds fantastic, and LayerSlider can definitely help bring that to life.
To answer your questions:
1. Shortcode Support:
Yes, LayerSlider fully supports WordPress shortcodes. You can add them using an HTML layer — just insert your shortcode (like [sonaar_player id="123"]) directly into the layer content, and it will render properly on the frontend.
2. Iframe Support:
SoundCloud iframes and other embedded players (like Sonaar.io) can also be added manually via HTML layers using standard HTML/iframe code.
Just note: since these are third-party embeds, their styling is often locked. However, you can assign a custom CSS class to your HTML layer (via the layer's “Attributes” settings), and then target that class in your custom CSS. That gives you some control over layout and appearance — though a basic understanding of CSS will definitely help here.
3. Playlist Per Slide:
While there's no native audio playlist integration per slide, your approach of embedding players (either via shortcode or iframe) in individual slides is fully supported. You can easily create one slide per genre, each with a cinematic image background and an embedded player.
4. Templates:
Currently, we don't have a pre-made template specifically for audio demo sliders. However, we do offer various creative slider templates that can be customized for your use case.
Wishing you the best with your site and music demo slider!
Best Regards,
George | Kreatura Dev Team
Hi George,
Thank you so much for your prompt response, you’ve helped me immensely! I’ve spent some time this past week working on it, and I think I’ve created something that’s working well. Of course, there’s room for improvement as I’m still learning, but with your guidance and the excellent templates that were available, I’ve put together something really cool to showcase (I think anyway!).
If you have a moment, feel free to check it out here if you're curious:
https://dillonderosa.com/#demos
I also have a question about something I’m trying to achieve. I have one slider for each demo “genre,” but I’m wondering how to change background images or objects within an individual slider — basically a slider within a slider.
For example, in my “games” genre demo, I’d like to feature one game as the background and main object initially, then about 10-15 seconds in, transition naturally to a different background/object, and after the loop ends, return to the first set. Is this kind of sequence possible?
Thanks again for your help!
Cheers,
Dillon
Hello Dillon,
Unfortunately this is not possible in the current version. You can add some other image layers and with timings, but they won't loop.
I've checked your slider and it is amazing, I like it, great job!!
Best Regards,
George | Kreatura Dev Team