Hi all
I am completely new to RW and UIKit3 (moved away from WordPress) and this is my 2nd day of learning RW and its approach to create websites. I watched all the UIKit 3 tutorial videos and was overwhelmed what one can do with all the stacks. But what I didn’t found was an example to create a full screen slide show with UIKit 3. Does anyone have an ideas or an example how to do this.
I wished I did the switch much earlier :-)
Thanks in advance, Harald
The beauty of uikit3 is there are normally many ways to achieve the same thing, the best option depends on your exact requirements.
A good starting point though it to add a cover stack to the page and set to “viewport”. Inside this drop the slide show and set the height to “cover”.
In the office now, so here is a really quick example. This is using the cover and some background stacks, so that you can put some content over the image and have a background behind it.
I’ve added in a navbar that sits over the slideshow, just for good measure.
Remove/change elements as required.
Demo: https://ci-clientservices.com/clientdev/uikit3slider/
If you need/want some starter projects, my Template Repo site has plenty of UIkit3 projects (it’s my default framework for all my RW work).
Hi Harald, welcome to the forum.
For the full screen slideshow simply set the Slideshow stack to viewport height. You may also set the offset option to 0.
If you wish to use images as the background items of your slideshow then use these settings at the Image stack:
Note that you can use other components as Slideshow items: for example in the home page of Archetypon in the very first section I’m using the Background, Grid, Image and Flex stacks to create the full screen slideshow: https://archetypon.net
Version two of the project, with the Lucas version added.
I might turn this into a freebie on Template Repo, once I’ve added in lots of other methods.
Version 3: Adds in some “down” arrows, to scroll to the full height section below the sliders.
https://ci-clientservices.com/clientdev/uikit3slider/
I should probably do some proper work now.
Or go ride my bike.
:-)
Go ride your bike.
I am in lockdown - can’t ride a bike or take a walk (more time to fiddle around with RW though)…
Hi Steve
thank you so much. This was really helpful. I used the cover stack with the viewport option and everything works as expected. Next I’ll try your slider example. I am at the very beginning of my RW journey, so I try to understand the key concepts of stacks and all the other things. But this one helped me a lot.
