As you would expect, StackSlider is compatible with most RapidWeaver themes, is fully responsive, and works across all major web browsers and devices. This page provides some working examples of StackSlider and is the main source of documentation for this stack.
Tip If you're looking for a slider with dedicated support for text and quotations, take a look at the QuoteSlider stack we provide. This stack was purpose-built for creating text-only sliders, and therefore contains a more focused set of customisable settings relating to text and quotes.
Tip If you're looking for a slider with dedicated support for text and quotations, take a look at the QuoteSlider stack we provide. This stack was purpose-built for creating text-only sliders, and therefore contains a more focused set of customisable settings relating to text and quotes.
Key features at a glance
StackSlider was one of the first addon stacks made available for the Stacks plugin. Version 4 is packed-full with powerful settings and the ability to create a diverse range of different content sliders in your products. Here are some of the key features of StackSlider:- Fully responsive, meaning that the slider will scale both horizontally and vertically to fit different screen widths
- Support for many basic content types; including plain text, rich text, Markdown, HTML code, images and basic video
- No limit on the number of slides you can add. Plus the ability to easily drag and re-order slides at any time
- Setup sliders which either run automatically or require manual navigation
- Hardware-accelerated CSS animations, with graceful fall-back to Javascript animations in older browsers. No Flash
- Options to navigate sliders with swipe gestures on touch screens, button clicks or with pagination bullets
- Apply borders, backgrounds, padding, margins and rounded corners of your own via the normal Stacks style settings
- Quickly embed completed sliders into theme ExtraContent containers or FreeStyle headers / banners
- Switch-on carousel support to display multiple slides simultaneously
- StackSlider is hidden until loaded, to limit the page jumping about. Images in the slider can be preloaded
Examples
These are some live examples created with the StackSlider stack. Brief information about how each example was created is also shown. Don't forget to use the free demo version provided to test StackSlider on your computer. If you resize your web browser window you can also see how each example responds to different screen sizes.Default settings
StackSlider dragged and dropped into a webpage with default settings applied (no settings changed). Images were configured using HTML stacks and image markup (enabling images from another location to be used). Ordinarily you can drag and drop images directly into StackSlider from your computer.
Minimal slider
A StackSlider with navigation buttons and pagination turned off. Because this slider is automated (plays by itself) this would be an ideal configuration to use for sliders destined for theme header or banner containers. StackSlider includes Placement settings already, with the option to embed your completed slider directly into a theme ExtraContent container or FreeStyle banner (requiring no additional stacks or configuration).
Manual slider
Configured the same as the StackSlider example above, except in this example users must manually advance the slider. This is done by clicking or tapping the navigation buttons or pagination bullets. Alternatively users on touch devices (like smart phones and tablets) can navigate backwards and forwards using horizontal finger swipe gestures.
Basic text slider
A StackSlider was dragged and dropped into this webpage. Beyond the default settings, the only change made in this example was to turn-off the previous / next navigation so that this would not interfere with the text. In this instance we just cycle through some text stacks.Text stacks can include basic HTML markup, like formatting, headings, lists and links. If the Adaptive Height setting in StackSlider is not enabled, we set the height of the StackSlider equal to the height of the tallest slide.
Vertical text slider
Same as the above example, except in this example we have set the slider to a vertical type.Vertical carousel
Created by turning on carousel support in the stack settings. The Minimum Slides and Maximum Slides were set to 3. The Distance setting was configured to 1 (meaning that the slider will transition one slide each time). The Slide Width setting was set to 0px (equivalent to auto). Slider Mode was set to vertical.Mixed content
Right-floating image stacks were dragged and dropped into this example. The image is rendered on the right and text free-flows around the image. If the slides were different heights, then we would take the height of the tallest slide and apply it to the rest. Alternatively the Adaptive Height settings can be used if you want to re-calculate the height of the slider on each transition.
Phasellus faucibus, leo eget blandit semper, augue felis ullamcorper lectus, vel luctus urna quam quis nunc. Nullam vel nibh sit amet felis tincidunt convallis eu nec purus. Sed tempor velit ut nulla pretium sodales. Quisque dapibus massa non velit elementum quis aliquam nibh pharetra. In arcu mauris, bibendum eget laoreet at, congue vitae tortor. Aenean sed lacus vitae ante sagittis pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Phasellus faucibus, leo eget blandit semper, augue felis ullamcorper lectus, vel luctus urna quam quis nunc. Nullam vel nibh sit amet felis tincidunt convallis eu nec purus. Sed tempor velit ut nulla pretium sodales. Quisque dapibus massa non velit elementum quis aliquam nibh pharetra. In arcu mauris, bibendum eget laoreet at, congue vitae tortor. Aenean sed lacus vitae ante sagittis pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Phasellus faucibus, leo eget blandit semper, augue felis ullamcorper lectus, vel luctus urna quam quis nunc. Nullam vel nibh sit amet felis tincidunt convallis eu nec purus. Sed tempor velit ut nulla pretium sodales. Quisque dapibus massa non velit elementum quis aliquam nibh pharetra. In arcu mauris, bibendum eget laoreet at, congue vitae tortor. Aenean sed lacus vitae ante sagittis pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Image carousel
A simple image carousel built with StackSlider. In this example the Carousel option was enabled and the default carousel settings were used. Adjusting the Slide Margin setting inserts space between each slide. The slider is automated, but hovering your mouse over the slider will pause the animation. It would be feasible to set images or text inside the slider as links to other pages, resources or external websites. The triggering of lightboxes is also possible.
Video slider
StackSlider supports basic video, including HTML5 audio, HTML5 video, YouTube and Vimeo. Full setup instructions are presented below and should be carefully followed to get the best results. In essence, you can use an HTML stack for each video you want to embed. Paste the embed code for the video into the HTML stack.Special code in the StackSlider will listen for the next / previous or pagination bullets being clicked. We then attempt a force-reload of the audio or video file. This ensures that the audio or video stops playing after the slider has advanced backwards or forwards. To prevent seeing black blocks when the slider is advanced (caused by the video reload) simply set the transition speed to 0ms in the stack settings.
Video and images
Based on the above example, but also including a selection of static images. StackSlider can help you 'tell a story' by using a mixture of different content types. This example also has the Adaptive Height setting enabled.
Setup
Follow these instructions for getting a StackSlider stack working in your webpage- Once installed, click onto your Stacks page. Open the stack element library. Drag and drop a StackSlider stack into your page
- Into the placeholder shown in Stacks edit mode, continue to drag and drop further stacks; like text, HTML code, markdown or images
- Customise the settings of your slider. A great many settings are provided to give you maximum customisability
- Preview the page in RapidWeaver to view the completed slider.
Basic settings
StackSlider can be configured to run horizontally, vertically or via fading transitions, changeable from the Slider Mode dropdown. The speed of the transitional effect can be changed using the Slide Transition setting. Additionally you can set the StackSlider to loop, adjust the amount of margin between slides (useful in carousel setups), specify a starting slide and change where you want StackSlider placed in your page. One of the most important basic settings is the ability to toggle between other a manual or automatic slider, from the Slider Type dropdown. An option has also been provided to apply an Adaptive Height to StackSlider, in instances where slides are different heights.Carousel settings
By default, StackSlider is not configured as a carousel. However you can easily enable carousel support in the settings. Carousel will basically enable the display of multiple slides simultaneously. Carousel can run in either vertical or horizontal slider modes. The number boxes for Minimum Slides and Maximum Slides do as the label suggests; in letting you control the final number of slides to display on small screens and the maximum number on wider screens. The Distance setting governs how many slides should move in each transition. The Slide Width sets the width of the carousel slides and should be set to 0px if you are building a vertical slider.Pagination settings
Pagination refers to the small bullet points below the slider. The purpose of pagination is to show the end user how many slides are in the set and their current progress. Additionally a user can click or tap a pagination bullet to jump to a particular slide. Several CSS style settings are provided to customise the appearance of these bullet points; like their size, colour and rounded corners. An alternative to pagination bullets is to display a slide count, and this is done from the pagination Type dropdown.Navigation settings
If your slider is configured to run manually (with button clicks or swipe gestures) it's important your users have an ability to navigate backwards or forwards through the slide set. Arrow buttons formed from Font Awesome icons give plenty of scope to customise the appearance of navigation buttons. If your RapidWeaver theme does not support Font Awesome icons, check the option in the Advanced Settings to include the required files. Like with pagination, you also have the option of changing the button size and colour. Buttons are positioned 50% from the top of the slider. To compensate for the space a button consumes, the Button Margin setting applies negative top spacing to lift the button back up slightly. This Button margin setting should nearly always be equal to half the font size. This will thereby ensure your next and previous navigation buttons are always perfectly aligned vertically (even if the height of the slider changes between slides).Play / pause settings
When your slider is running in automatic mode, it may be advantageous to provide a means for end users to stop and restart the video. This is where the play / pause settings can come in useful. Play / pause buttons are only shown when the Slider Type is set to automatic. When enabled, your play / pause buttons are shown at the bottom right. Like with other button styling, StackSlider gives you options to change the button size and colour. Enabling the Combined Button option will toggle between a play and pause button on click.Audio and Video Support
StackSlider has basic support for common audio and video content embedded into your slider. In the advanced settings, you must check the Video Support setting. Confirm that both Touch Support and CSS Transitions are disabled (these settings are also in the advanced settings). It is strongly recommended that the slider is setup to run in manual mode, rather than auto mode. StackSlider has been tested with HTML5 audio, HTML5 video, Youtube and Vimeo content. If the slider is advanced backwards or forwards with button or pagination clicks, we attempt to stop the content that is presently playing. This avoids the problem of multiple audio or video files playing simultaneously. Remember that some web browsers (like Safari on iOS) will instinctively open video in a new tab or the YouTube app. Video from YouTube and Vimeo will be scaled responsively to fit within the slider. The reloading of audio or video may cause the previously active slide to flash black, and this can be rectified by reducing the transition speed to 0 ms in the stack settings.Supported stack types
The best and most successful sliders people have built with SliderStack in the past have always been the simplest ones. Individual slides can comprise of rich text, HTML code, Markdown, static images or basic embedded video. You can drag and drop other basic stack types into SliderStack. Any stacks which don't rely on complicated animation effects should work fine. Anything more complicated with jazzy animation effects, rollover transitions or complicated user interfaces are much less likely to work. Due to the modular nature of Stacks and the rate at which stacks are developed and updated, we cannot provide lists of compatible stacks.It is feasible to 'mix and match' different content types. For example, you could build a StackSlider that has some slides of text, some of static images and some of YouTube content. Equally so, a major advantage of the StackSlider is an ability to re-order your slides at any time and change their sequence.
Privacy Settings
You are welcome to change your privacy preferences here.
By using this website, you agree to the privacy policy
