Creating a full page "Screens" scrolling web site with Splider

Shaking The Habitual STH Examples
1

I was trying to create a TikTok type mobile slider, i.e. 100 screen height, full width top to bottom scrolling to the top of the next or previous page, for an application.

A quick configuration of Splider showed this was possible, however, I then realized that Splider could build an entire web site in this way. I.e. a full page for every page, scrolling to the next page vertically, or horizontally in a similar way to how Screens worked.

The configuration is very easy. Setup a Splider in the following way:

  1. Remove all padding and turn off buttons and pagination (if you want).
  2. Setup Splider to be 1 per page and move at 1 slide Top to Bottom.
  3. Set height to be 100vh, i.e. full page height.
  4. Put a Container set to 100vh inside every slide and fill with your content.
  5. If you want a horizontal set of slides, then duplicate this Splider and place inside one of the Containers inside a slide. Set the new horizontal Splider movement to be left to right.

That’s it.

Screen content adjustment will then all take place inside each Container.

9 Likes
2

Looks like you’ve got yourself an inspiration for a new Project for sale? It sounds very interesting and I, for one, would be a buyer. But then, again, you made it sound so simple, that I should probably try it on my own…

3 Likes
3

Yes I will probably create a project with this idea.

Because of the nature of this Splider idea, it can be pasted into other designs making it pretty useful. With the integration of Poster2, then it can really grow into a content heavy design.

5 Likes