Slider with custom content

Is there any way to make sliders with custom content in Sparkle? You know, the kind of sliders clients often request, like:

  • Sliders for hero content areas, where each slide contains a background image, a heading, some text and a button.
  • Testimonial sliders
  • Sponsor logos sliders

Possible with custom coding?

Welcome onboard @tudor! :slight_smile:

Yep you can with the Image Gallery element.

Thank you!
What I’m looking for are sliders with fully customizable content, where for example each slide contains a different image, a different heading, text, button etc. I don’t think this is possible using the Gallery element.

@tudor, It is possible…

Once you place your Image Gallery element the right hand panel will reveal what you can do…

1 Like

Here is an example of the type of slider I need:

In Sparkle you can have some of those features like slide / cross-fade, manual or auto slideshow, and hero title and summary, but for the rest no.

The Sparkle Team has mentioned that the Image Gallery is on their list for some love! :slight_smile:

Also be aware the consumer statistics shows that they by past most of the time excessive hero sliders as they hunt for what they are looking for…

Sparkle allows for free-flow creativity when it comes to web design allowing us to create alternative solutions but always keeping in mind how the consumer will interact and benefit from it.

1 Like

https://vintageinvogue.com

Take a look at what I was able to make on this homepage, using Sparkle image gallery set to auto and using the images below, masking the actual large gallery above.

1 Like

@macmancape Clever!

That’s the beauty of Sparkle… It allows our imagination to flow! :slight_smile:

1 Like

yea, as @FlaminFig said, you aren’t able to do smart sliders within Sparkle yet.

Each component in this slider (within the red lines) is a separate container with its own effects and movement.

Pretty sure we’ll be able to do it somewhere in the future, but for now you gotta settle with the simpler image and title options.

The main reason why I started using Sparkle a couple of weeks ago was to be able to produce website prototypes with dynamic elements like animations, drop down menus and sliders. These are cumbersome of impossible to simulate in apps like Sketch, XD or Figma. Sparkle is pretty good at this. I just need an option to convert groups of objects into slides and animate them.

1 Like

Hello Hendrik, hope you are doing good. Today I checked your website and realised that the content on your website is not zoomed on iMac 27" screen. The content size is same on both the desktop screen (laptop) and big screen as well.

But when I see the preview on my iMac 27" screen all the content is zoomed. I set the 1200px screen from Autoscale to Custom and specially set the font size of text and image size equal to the sizes of text and image on 960px screen, but still everything gets zoomed.

I can’t understand why is this happening. Could you please throw some light on this and help me out !!

I am attaching both the pics of preview on 960px and 1200px.

Thanks,
Ujjwal

Hi @vermau, that is an easy one…

My Flamin’ Fig website I built using custom layout which is a year and half ago now. In that time Sparkle acquired “auto-scaling” which has changed how I go about creating websites.

With my Flamin’ Fig 2.0 (coming to a theatre near you, soon I hope!) I have used auto-scaling and so when viewing it on the larger screen it will also scale up like what you are showing in your screenshots.

Looks like I will have to set all 4 sizes (1920px, 1200px, 960px and 340px) to custom 'cuz the site looks very weird on big screen with large texts and images.

  1. Maybe the scaling can be done at 80% up and down instead of 100% and that might resolve this issue.
    (1200 / 960) * .80
    (768 / 960) * .80

  2. Another problem is that when we change from Autoscale to Custom, the screen is all messed up. If the same logic is applied to custom screen initially just like Autoscale, all components will in their place. Then we only would just need to change their size up or down. This will save a lot of time for the users.

Feedback for the next version of Sparkle. Hope to see some nice features in V5 of Sparkle…


Sparkle 5 is out and still no support for sliders (carousels) with custom content (text, images, buttons)?

I don’t think that is the case @tudor?
Are you talking about on the page itself that you slide from one canvas to the next?

If that is the case you can use popups to achieve the slider effect…

@FlaminFig This is what I’m talking about, the slider at the top of this page, in the “hero” area. Most sites I worked on had one or more sliders like that one. Each slide has a heading, some text, a button and an image. And there is one more slider down the page with news content and icons.

There could also be sliders with text, like testimonials. Or sliders with sponsors logos.

Basically I need to display a few containers with any kind of content.

Hello @tudor :wave:t2:

Unfortunately, Sparkle 5 does not introduce any new features for image galleries. However, you can achieve a similar result with the current functionality. The only limitation is the inability to add buttons, but you can place text and incorporate links within it.

1 Like

Maybe you could fake one? Using popups and a smart field countdown that opens a new pop up when It finishes the countdown or when a next arrow is clicked.

how did you do that hero slider? I figured out how to make the smaller one with the image gallery element…but not sure how with the wide box /full width box.
Any help please.

Hi and welcome onboard! :slight_smile:
I’m assuming you are talking about the sliding hero on the Little Picnic Co website.

You are on the right track. It is just a matter of one click under the Arrange tab.