Horizontally sliding cards?

Is there a way to create a slider of cards, using Foundry? For example, see ‘Trending events’ on the following page:

Maybe:
Horizon Stack for RapidWeaver

1 Like

The Slider stack that comes with Foundry will allow you to place content like a Card inside of it.

3 Likes

Many thanks to you both. The weavers.space one looks like what I had in mind.

Adam: Unless I am missing something, there is no way to configure the Slider stack to show a horizontal row of cards that one can then navigate? For example, I have a total of seven cards, and at any one moment I want four of the cards to appear horizontally, with the ability to then scroll through them all.

This is an example of a Slider stack doing what you outline: cards-in-columns-in-slider.mp4 • Droplr

Each slide is a Columns stack set to 4 columns. In each column is a Card stack. Modular layouts are something Foundry excels at IMO. :smiley:

3 Likes

Excellent. I’ll give it a go!

Unlike in your example, my cards are overrunning on both the left and right to the edge of the browser. Is there some setting or container I should be using?

It is laid out just as I described above. The Container is only there to make it look nicer in the video: slider-cards-example-project.rw8.zip • Droplr

2 Likes

I would like such a horizontal slider as well. The current slider in your example moves four cards in one go, so you can not move from one card to the next card by scrolling and still see the ones before.

(Also I like the view of the half-card at the right side, so the viewers know there is more to come.)

1 Like

If that is something you want then I would recommend using that stack then. I was offering @talazem a way to achieve what they wanted to do without needing to spend extra money if that helped.

5 Likes

True - thank you I will :slight_smile:

Shaking The Habitual just released a stack for this:

“Splider is based on an amazing javascript library called ‘Splide’. It is an extremely powerful and versatile slider that weighs in at less than 30KB ! All sliders on this page were created with Splider.”

@elixirgraphics perhaps this library is interesting for you as well?

3 Likes

That still does not “scroll” as the example in the first post shows. It is basically the same slider that is a stack in Foundry. With maybe the exception of the “peek” setting revealing the next full slide.

Just to reinforce what Fuellemann pointed out, the new Splider stack will do exactly what is required. You can show a display of 3.5 cards, with the .5 card peeking out from the side. Or have half a card on either side and also respond responsively with different numbers of cards of images or BG images or anything really. It can move by however many slides you set it to move. It is very different from the standard Foundry slider.

I think the original intent of the request is for the content to “scroll” or not go to the next position as all of the other examples brought forward. Horizontally sliding cards? - #4 by talazem

Adam: Unless I am missing something, there is no way to configure the Slider stack to show a horizontal row of cards that one can then navigate? For example, I have a total of seven cards, and at any one moment I want four of the cards to appear horizontally, with the ability to then scroll through them all.

That is a nice slider. Another good option for the community.

As for looking at the library for building another slider – that probably isn’t something I want to do right now. I have several ongoing projects that are taking up a good deal of time already. Plus I have the Orbit slider that has been around for years now as well: Image Sliders | Orbit

3 Likes

Steve_J is right about what had originally been asked about. As far as existing solutions are concerned, the Horizon Stack is closest to the original intent. The new Splider stack doesn’t scroll smoothly by using the trackpad (though it does if you click and drag), but looks very nice otherwise.

Adam’s solution above, while slightly different, is good to know about and keep in the quiver.

3 Likes

I try to make a demo, perhaps it works … perhaps its not what I thought it could do. Let’s see…

1 Like

The Splider stack solution builds a far better behaving slider that maintains a part of the off screen card visible at all screen sizes. The Humantix Events slider looses the hidden slides as the screen size reduces, and users will be unaware that there cards off screen available to view. There is no indication that other cards exist.

Also, I can’t see see any loss of smoothness using a trackpad on a live Splider demo I just tried. Dragging, swiping, keyboard arrows appear to be all just as smooth.

2 Likes