ExampleThis is an example of MegaGlider using the sample images supplied in the stack. Each image has been set as a link to https://example.com in this demo.
SetupMegaGlider is ideal for novice RapidWeaver users, as an entry-level stack. To use MegaGlider, follow these simple instructions:
- Download the .zip package using the download button above, for this stack.
- Uncompress the .zip package if your computer does not do it already.
- Drag and drop the S4S-MegaGlider.stack icon onto your RapidWeaver dock icon.
- Follow the onscreen instructions to install the stack and restart RapidWeaver.
- Add a Stacks page type to your website, if you do not already have one.
- Open the Stacks Library. Search for 'MegaGlider' in the search box.
- Drag and drop a copy of MegaGlider into your webpage.
- Press the blue button to add either a new slider item or 10 sample images.
- If adding your own items, drag and drop an image stack into the area denoted 'Drop stacks here'.
- Select MegaGlider in edit mode to customise any of its settings in the Stacks side panel.
- Preview the webpage to see the completed MegaGlider stack. Export or publish your page when done.
As always, if you mouseover any MegaGlider settings, you are presented with small informational tooltips about what each setting does.
If the top and bottom of your slider is getting cut-off, use the MegaGlider Height setting to increase the container height. And vice-versa if there's too much space above and below the slider, reduce its height. The units of measurement used 'vh' stand for 'viewport height' and are used for sizing things responsively. You are welcome to use alternative units of measurements (like pixels, rems or ems) if you find they work better for you.
Most users of this stack are likely to use Image or Site Image stacks, dragged and dropped into the area denoted 'drop stacks here'. Each item you add to the MegaGlider becomes a new slider item. You are free to add as many items as you want. This newer version of MegaGlider also lets you drag to change the order of items in edit mode. If you prefer to use warehoused images, simply use HTML stacks and standard HTML image tags.
Adding a shadow effectMegaGlider can be further-extended with custom CSS code. A good example of this is applying a box shadow effect on all the items to make them more '3D':
Other styling you could experiment with includes rounded corners and border effects. Custom CSS code (like the above) can be placed within the Page Inspector, in your custom CSS box.
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);