This stack was created many years ago by Mauricio Sabene for Stacks v1. A need recently arose to create a simple 'coverflow' style slider to display product images and links in a new website. It was found that with some updates, the old MegaGlider stack could be made to work well for this purpose. Some work was done to update some of the old Javascript code for jQuery 2 compatibility and make the MegaGlider more mobile compatible (see the notes below). MegaGlider is now using some of the latest API features offered in Stacks 3, so the user interface has been revised and MegaGlider can now support an unlimited number of items (the previous cap of 20 items is now gone).

Example

This 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.
 
My Image 1.
My Image 2.
My Image 3.
My Image 4.
My Image 5.
My Image 6.
My Image 7.
My Image 8.
My Image 9.
My Image 10.

Setup

MegaGlider is ideal for novice RapidWeaver users, as an entry-level stack. To use MegaGlider, follow these simple instructions:
  1. Download the .zip package using the download button above, for this stack.
  2. Uncompress the .zip package if your computer does not do it already.
  3. Drag and drop the S4S-MegaGlider.stack icon onto your RapidWeaver dock icon.
  4. Follow the onscreen instructions to install the stack and restart RapidWeaver.
  5. Add a Stacks page type to your website, if you do not already have one.
  6. Open the Stacks Library. Search for 'MegaGlider' in the search box.
  7. Drag and drop a copy of MegaGlider into your webpage.
  8. Press the blue button to add either a new slider item or 10 sample images.
  9. If adding your own items, drag and drop an image stack into the area denoted 'Drop stacks here'.
  10. Select MegaGlider in edit mode to customise any of its settings in the Stacks side panel.
  11. 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 effect

MegaGlider 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':

.megaGliderItem {
	box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);
}
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.

Mobile compatibility

The original plugin that MegaGlider is built on was never intended to offer responsive behaviour. This means that if the page is resized (or changes orientation) after the slider is loaded, it can break the display of your content. To circumvent this problem, we added a simple checkbox option to soft-reload the page if it resizes. This forces the MegaGlider to reinitiate and redraw the placement of each slider item. This is a simple yet effective solution. We also made the MegaGlider Height setting accept different units of measurement. VH (viewport height) is the default, but you can experiment with others too.

 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.