Tutorials stack icon

Slidetastic

An insanely configurable, customizable, stunning content and image slider stack for RapidWeaver - by Weavium

Table of Contents

  • How to use
  • General
  • Slides
  • Navigation > Arrow Buttons
  • Navigation > Dots
  • Slidetastic Image Captions
  • Experimental (Center Mode)


Introduction

Here you can learn how to use the Slidetastic stack from Weavium. Of course, if you have any questions along the way, you are always welcome to visit the support page and leave us a message. _-


How to Use

Slidetastic is very intuitive stack and is extremely easy to use. All you have to do is drag the main Slidetastic stack onto the page, and then add Slidetastic Slides by clicking the ( + ) button in RapidWeaver.

You can then add any content that you want to your slides! That is right, any content~~

If you want, you can also add Slidetastic Image stacks into Slidetastic Slides, in order to easily create full page image captions. Slidetastic Images, and captions can be configured via the main Slidetastic stack. : )

Finally, all you really have to do is make any style changes that you want, you are good to go!


General

Here you can set up the general layout of the Slidetastic stack, such as maximum width, padding, and most importantly toggleable options like loop and autoplay!

Loop (Checkbox)

When the loop option is checked, the slider will loop back to the beginning after reaching the end of the slide list.

Autoplay (Checkbox)

When the autoplay option is checked, the slider will automatically play through the slides, without having to click on the navigation buttons.

Once this option is checked, you will also see additional controls appear for setting the autoplay speed, and an option for Pause on Hover.

Adaptive Height

When the adaptive height option is checked, the slider will automatically resize its height according to the content in each slide. Even if one slide is longer than another, the slider will automatically resize after the slider transitions.

This is the default functionality.

Max Width

This option simply sets the maxium width for the slider

Slide Padding (Vertical & Horizontal)

The vertical padding option controls the spacing above and below the slides.

The horizontal padding option controls the spacing on the left and right sides of the slides.

NOTE: Horizontal spacing will not affect arrow buttons, this is useful for creating an offset button affect!


# of Slides (Inputs x 3)

The # of Slides inputs will determine how many active slides there are per page

E.g. if you set the # of slides to 3, then there will be 3 slides per page

You will find 3 inputs D, T, and M, one for Desktop, Tablet, and Mobile.

# to Scroll (Inputs x 3)

The # to Scroll inputs will determine how many slides to scroll over when the arrows/dots are clicked, or when autoplay runs.

E.g. if you set the # to scroll to 3, then the slider will jump 3 slides at a time.

You will find 3 inputs D, T, and M, one for Desktop, Tablet, and Mobile.

Slide Spacing (Inputs x 3)

The slide spacing option will determine how much space is Inbetween each individual slide. Set this to 0 for sliders that should be flush, or increase the value to add a gap between slides.

You will find 3 inputs D, T, and M, one for Desktop, Tablet, and Mobile.

Breakpoints (Inputs x 2)

You will find two inputs for controlling the responsive breakpoints of the Slidetastic Stack. One for Tablet and one for Mobile.

These breakpoints will determine when the breakpoint specific settings like T or M are applied.

Slide Radius (Input)

Determines the corner roundness of the slides

Slide Min Height (Input)

Determines the minimum height for all slides. Usefull when the content doesn't necessarily reach the height that you desire for the slider.

Slide Background (Color)

By default this is set to transparent, but if you do want a background color for all slides, feel free to adjust this.


Navigation > Arrow Buttons

Here you can controll all of the settings for the Arrow Buttons of the Slidetastic Slider, including button postioning, colors, spacing, etc.

Show Arrow Buttons (Checkbox)

Simply toggles the Arrow Buttons on or off

Icon Color (Initial & Hover)

Controls the color of the Arrow Icon inside of the Arrow Buttons. You will find options for both Initial and Hover states.

Background (Initial & Hover)

Controls the background color of the Arrow Buttons. You will find options for both Initial and Hover states.

Position Vertical (Select)

There are 4 different choices when it comes to vertical position of arrow buttons:

  • Top
  • Center
  • Bottom
  • Full Height (Buttons will exend the full height of the slider)

Position Horizontal (Select)

There are 5 different choices when it comes to horizontal position of arrow buttons:

  • Left
  • Center
  • Right
  • Separated (Buttons will separate to each separate side of the slider)

NOTE: When Left, Center, or Right is chosen for the horizontal positioning, you will also be able to choose to stack the arrows on top of eachother!

Simply check the Stack Arrows Vertically Button, and the arrows will now be on top of one another. You'll see how this looks in the Slidetastic preview.

Size

Determines the outer size of each arrow button

Icon Size

Determines the size of the arrow icons inside of each button

Radius

Determines the corner roundness of the arrow buttons

Spacing (vertical & horizontal)

Determines the spacing between each of the buttons


Navigation > Dots

Here you can choose to show dots for each page of slides, and configure the dots as you wish!

Show Dots

Simply turns the dots on or off

Position (Select)

Here you can choose to align the dots to the top or bottom of the slider

Dot Color

Determines the color of all dots (excluding the active page dots)

Active Color

Determines the color of the Active Page Dot

Size

Determines the size of each dot

Radius

Determines the corner roundness of each dot, can be square or circular

Offset

This input will allow you to push the dots inward from the top or bottom, depending on which vertical position you chose.


Slidetastic Image Captions

These settings apply to any Slidetastic Images that you add into a Slidetastic Slide. If there are no Slidetastic Image stacks added, these settings will have no affect.

Display (Select)

Here you can determine when the image captions will be displayed. There are 4 options to choose from:

  • Always
  • On Hover
  • On Active Slide
  • On Hover & Active Slide

Position (Select)

Determines where the caption will be placed, either at the top or bottom of the image.

Caption Outside (Checkbox)

If the Caption Outside option is checked, the captions will not be floated over the images, but instead, be placed above or below the image, depending on your Position choice.

Text Align

Determines the alignment of text in the caption (Left, Right, Center)

Padding (Vertical & Horizontal)

Determines the amount of padding around the content of the captions.

Background

Determines the background color of all captions.

Show Titles (Checkbox)

Allows you to toggle Caption titles on or off. Useful for showing only descriptions.

Title (Color)

Controls the color of all image caption titles

Title Font (Select)

Allows you to choose the font of all image caption titles

Title Size (Inputs x 3)

Determines the font size of the Title. You will find 3 inputs D, T, and M, one for Desktop, Tablet, and Mobile.

Title Spacing (Inputs x 3)

Determines the space between caption Titles and descriptions. You will find 3 inputs D, T, and M, one for Desktop, Tablet, and Mobile.

Show dDscriptions (Checkbox)

Allows you to toggle Caption Descriptions on or off. Useful for showing only titles.

Description (Color)

Controls the color of all image caption Descriptions

Description Font (Select)

Allows you to choose the font of all image caption Descriptions

Description Size (Inputs x 3)

Determines the font size of all Descriptions. You will find 3 inputs D, T, and M, one for Desktop, Tablet, and Mobile.


Advanced / Experimental (Center Mode)

Here you will find the epic Center Mode option for Slidetastic!!

Center Mode, allows the Slider to focus on one stack at a time, while the rest of the slides will remain partially transparent.

There are a couple of rules that apply when center mode is turned on:

  • # of Slide must be set to an odd number such as 1, 3, 5 etc.
  • All Slides will scroll one at a time, despite the # to scroll option

Slidetastic Changelog