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.
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.
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.
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…
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.
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.
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.
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.
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.
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).
