A new stack.....Splider

Icon

You may have spotted my post the other day with a sneak peak of the next RW Academy course that will focus on using freely available code (Splidejs) to create a slider. Well, the more I played with it the more I knew I needed to make a stack using it too. It’s just so good!

The stack will be getting released properly in the next day or two but I added it to my website a bit prematurely and a few have been sold already. As such I thought I would share it here and also share a discount code to get an extra 10% off the special launch price: splider-rw4all (valid until Friday).

I’m still pulling the support pages and an example project file together but (I think!) it is straightforward to use.

Check it out here if you are interested.

And yes - I’ll still be going ahead with the course. Anyone who purchases the stack (and still wants to learn how to do this kind of thing themselves) will get 50% off the course price.

11 Likes

Hi
Are you able to do this style, it was posted on another thread regarding a new academic lesson you were thinking of doing

Thanks

As in a central one and 2 being half seen? Yes - the stack can do that.

1 Like

This does look good. Finally a slider that does those carousel layouts that the outer edge “slides” partially appear on the sides of the screen - just like the BBC web site. I think this has become a very acceptable way to fit wide content on a screen too narrow to normally view it all. For the right application this is a perfect solution.

I assume it can also do hero slides and fades?

1 Like

Do we need Source for this or can I use this in e. g. Foundry?

No - doesn’t need Source. Can use it anywhere!

Yeah - this is the key thing. I’ve never been a massive fan / user of sliders / carousels but they do work well for certain things.

As for hero headers then yes - it works with any stacks / content that you add to it so you could add a number of slides each with a hero header container and have Splider go between them (probably using the ‘Fade’ mode). You’d probably also get rid of the Navigation arrows and maybe the pagination too. And get rid of the default padding that brings the content in.

Hero headers are one of the areas that a lot of people say sliders / carousels do not work well with and do not convert well. But I know they are used widely…

1 Like

Also have managed to get a Knowledge Base page together: https://knowledge.shakingthehabitual.com/collection/8-splider

Example project still to come…

1 Like

I took the plunge as I’m in need of slider options for a current project however uBlock Origin really doesn’t like the download link. Just a heads up - I’ll disable it.

1 Like

Odd. I have used Paddle for a couple of years now and never had anyone report that before. uBlock is quite widely used as well. Thanks for the heads up - i’ll have a look into that.

It works well for card type layouts without reducing the size of the cards. It’s a new tool in our responsive toolbox.

1 Like

Instant buy :-)

2 Likes

It is triggered by the pstmrk domain. I had this once also.

1 Like

Thanks to everyone that has bought Splider. Hope you are enjoying it!

Have managed to put an example file together now. It uses many of the examples from the Splider web page. You’ll find it on the Splider Knowledge Base pages.

Cheers :)

3 Likes

I think it looks great but I’m not going to buy the stack. I’ll wait for the course and buy that. 8-)

2 Likes

Not true, MovingBox by Weavers Space had that long ago. You can see it on the demo page:
https://www.weavers.space/demo/movingbox/

Great new stack though, nice work @habitualshaker

1 Like

That’s good to know but I could never get it to work just right. You would get a blank slide appearing when it looped and there was another issue I can’t recall. Sliders have improved a lot since MovingBox but it was ground breaking in it’s time.

2 Likes

The loop problem of MovingBox was fixed. It works very nice. And it does support Total CMS.

Your comment piqued my interest and I fired up MovingBox2. Yes it can do the 2 edge slides, but they appear to be set at a fixed 50% of the screen which doesn’t quite achieve the effect well IMHO. Adjusting it was the the other thing that I couldn’t recall, in that it takes a great deal of adjustment to get it all working nicely at all screen sizes. It lacks the second breakpoint that Splider has, so compromises need to be made to get MB2 looking its best on small screens.

Splider is different in that the default settings are spot on and then easy to adjust. You can adjust exactly how much slide “peeps” out from the left and also right side and this makes it possible to just have one side “peeping out” with Splider.

I checked the sizes of the code and noticed that MB2 loads 171Kb of FA4 icons just for the side arrows, but that’s how it was done back in the day! As Stuart points out the whole of the Splider code is only 30Kb and FA4 is not needed.

2 Likes

Splider is definitely a nice lightweight solution and doesn’t need FA or jQuery. I don’t have Moving Box so can’t really comment on any comparison.


In case you missed them, there have been a couple of nice little updates since release (details here) and I have also added a few more examples onto the Splider web page (quotes, centre focus, image ‘fade’ slider).

Launch pricing is still good for another week (until 22nd May).

1 Like