Slider Main Settings

Once you’ve created your first slider, the next step is to choose your slider’s main settings. From your slider’s list in the plugin’s main admin page, click the “Settings” button shown here:

 

You’ll then be taken back to the page where you first named your slider. Here you’ll find two columns on the left and right side, each containing several sections for your slider’s main settings:

 

Main Slider Settings

^ back to Slider Main Settings menu

  1. Slider Title: The name of your slider. Can be anything, and is only used for admins to keep track of their sliders.
  2. Slider Alias: Will represent the slider’s shortcode alias. Use lower-case letters, and avoid spaces and special characters (dashes and underscores ok).
  3. Slider Shortcode: This value will populate automatically based on the Slider Alias you’ve chosen. Copy and paste this into one of your pages/posts WYSIWYG editor for the easiest way to add a slider to one of your pages.
  4. Source Type: Choose between a regular slider or a product-based slider.
    • Gallery: The default option. If you plan to build a slider manually through the slider’s admin, choose this option.
    • Products: If you want your slider’s content to be based on a set of products from some categories, choose this option.
    • Specific Products: Choose specific products you wish to include as your slider’s main content source.
  5. Slider Layout: View Screencast
    • Auto Responsive: Usually the best option for most websites. The slider will always “respond” based on the slider’s immediate parent container (the HTML container of your theme where the slider is placed).
    • Fixed: A non-responsive slider (slider’s size will never change, use this option if your website is not responsive.
    • Custom: If you need a “responsive” slider, it’s usually best to use the “Auto Responsive” option. But the Custom option is useful if you need more advanced control over how the slider’s responsive behavior. There are 6 “responsive points” you can choose:

    • Full Screen: The slider’s size will equal the window’s entire width and entire height. For example, if the screen size is 1024×768, the slider’s display size will also be 1024×768, and will adjust dynamically depending on the user’s screen size. When this option is chosen, you’ll see some additional options that will help you position the slider on the page in relation to other page content:

  6. Unlimited Height: (only available when “Auto Responsive” is selected) Click here for an in-depth explanation about how this option works.
  7. Force Full Width: (only available when “Auto Responsive” is selected) Use this option to force the slider to be full-width on your web page.
  8. Grid Settings: Represents the slider’s initial size. If the “Slider Layout” (#5 above) is “Fixed”, these numbers will represent the size of your slider. If the Slider Layout is “responsive” (“Custom”, “Auto Responsive” or “Full Screen”), the slider will “respond” based on these initial values. View this FAQ to learn more about “Ideal Image Size”, and how it corresponds to the slider’s “Grid Width” and Grid Height”.
    • Grid Width: The Slider’s initial width (required value)
    • Grid Height: The slider’s initial height (required value)
  9. Layout Example: A visualization representing the slider’s layout options.
  10. Save Settings: Save the slider’s currently selected settings.
  11. Delete Slider: Delete the current slider (this action is permanent!)
  12. Close: Return to plugin’s main admin page.
  13. Edit Slides: Shortcut button to edit the slider’s individual slides.
  14. Preview: A popup modal will load allowing you to preview the current slider (a slider must have some slides added to it before a preview is possible)

 

General Settings

^ back to Slider Main Settings menu

 

  1. Delay: A global delay that will be used for the time between each slide is shown (this value can be optionally overridden inside each individual slide).
  2. Shuffle Mode: Randomize the slide order each time someone views the slider on your web page.
  3. Lazy Load: Load images “On Demand” when shown inside the slider (as opposed to loading all sliders images immediately when the page first loads). This option is useful for speeding up initial page loading, and can also be useful for solving conflicts that involve other cache plugins/services such as CloudFare.
  4. Use Multi Language (WPML): Use this option if your site’s setup is WPML-based.
  5. Enable Static Layers: Adds a button the slide list that allows you to add permanent layers to the slider (i.e. will always be present even when your slides change).
  6. Stop Slider: Autoplay Option. Set this to “On” for no auto-play.
  7. Stop After Loops: Choose to stop the slider after a specific number of loops.
  8. Stop At Slide: Used in conjunction with “Stop Slider” above, choose which slide the slider should stop at (i.e. enter the number “1” to stop at the first slide).

 

Position

^ back to Slider Main Settings menu

 

The “Position” section is where you can choose how the slider is aligned on the page, and also add margins for the slider. Usually “center” or “left” is best for “Position on the Page”, and the “Margin Top” and “Margin Bottom” options are useful for spacing out the pages other content that exists above and below the slider.

 

Appearance

^ back to Slider Main Settings menu

 

  1. Shadow Type: An optional drop shadow for the slider. Choose between “No Shadow”, or one of the three built-in shadow types (1, 2 or 3)

    1:

    2:

    3:

  2. Show Timer Line: The slider’s main “timer line” that will represent the time between each slide change. “Top” and “Bottom” are position options for the timer line, or you can choose “Hide” for no timer line.
  3. Padding (border): Adding a value here will create an inset border for the slider.
  4. Background Color: The slider’s main background color. This will show before the first slide shows, and also be shown if you’re using “transparent” slides (an individual slide without a main background image or background color). For no background color (i.e., a “transparent” background), enter the following value manually into the field: rgba(0, 0, 0, 0)
  5. Dotted Overlay Size: Choose to use a dotted/transparent overlay graphic for the slider. This is a pattern-based overlay. Options are:
    • None
    • 2×2 Black
    • 2×2 White
    • 3×3 Black
    • 3×3 White
  6. Show Background Image: Choose to use a main background image for the slider. This will show before the first slide shows, and also be shown if you’re using “transparent” slides (an individual slide without a main background image or background color).
  7. Background Image URL: The absolute url to the slider’s main background image (if optioned above).
  8. Background Fit: The CSS “background-size” for the slider’s main background image (if optioned above).
    • Cover: Stretch the background image to always fill the entire slider (cropping may occur).
    • Contain: Always “fit” the entire image inside the slider. Cropping will never occur, but depending on the size of the image vs. the slider’s “Grid Size”, there may be some blank space shown on the sides of the image.
    • Normal: No background resizing will occur (i.e., the image will display in its original size at all times).
  9. Background Repeat: If your slider’s main background image is a regular image, set this to “None”. Otherwise, if your main background image is meant to be a repeating pattern (png or gif), use the “repeat”, “repeat-x” (only repeat horizontally) or “repeat-y” (only repeat vertically) options.
  10. Background Position: The slider’s main background position (10 position points available). If you’re using “Cover” as the “Background Fit” option, usually “center top” or “center center” is a good option here. Otherwise, for a “Background Fit” of “Contain”, “center center” is a good option here.

 

Parallax

^ back to Slider Main Settings menu

This section is for applying parallax-based animation to your slide’s layers. Click here and here for examples. You can also import one of the parallax demo sliders (“example-zips/parallax_slider.zip” or “example-zips/parallax_scroll_slider.zip”) to use as a starting point.

 

  1. Enable Parallax: This will activate the parallax effect, and also add a new “parallax” option to the layer options section (see screenshot below).
  2. Disable on Mobile: Parallax usually works best with traditional mouse movement. This option allows you to disable the parallax effect for mobile where a “mouse” isn’t available.
  3. Type: Options are:
    • Mouse Position: Objects will move based on mouse movement. Example
    • Scroll Position: Objects will move based on the window’s scroll position. Example
    • Mouse & Scroll: A combination of the above two options.
  4. BG Freeze: Set this to “On” if you don’t want your slide’s main background to be part of the parallax effect.
  5. Level Depth 1-10: The different level values that can be chosen from as a layer’s parallax effect. Use smaller numbers for little movement, and larger numbers for larger-based movement. Once set, you can then choose a “Level” that you’d like to apply when editing an individual layer (i.e., level “1”, level “2”, etc.).

 

Spinner

^ back to Slider Main Settings menu

The “Spinner” represents the slider’s visual preloader. This will be shown when the page first loads, and also between slides if you’re using the Lazy Load option. There are 6 preloaders you can choose from. Select from the dropdown list to see a live preview of each.

 

Navigation

^ back to Slider Main Settings menu

 

  1. Stop On Hover: Stop the slider’s autoplay when hovering your mouse anywhere on top of the slider.
  2. Keyboard Navigation: Enable keyboard shortcodes to change slides using the left/right arrow keys.
  3. Navigation Style:

    Round:

    NavBar:

    Preview 1:

    Preview 2:

    Preview 3:

    Preview 4:

    Old Round:

    Old Square:

    Old Navbar:

    Custom: If the slider came packaged with your theme, your theme may have a “custom” navigation style for this option. Otherwise, advanced users can use this option and add some custom CSS to the slider for custom navigation buttons. The class names for this would be:

    .tp-leftarrow.custom

    .tp-rightarrow.custom

  4. Bullet Type: Options are
    • None: No bullets or thumbnails
    • Bullet: Traditional bullets
    • Thumb: Traditional thumbnail strip (example below)
  5. Navigation Arrows:
    • With Bullets: Arrows will be placed on the sides of the bullets (not compatible with all “Navigation Styles”).
    • Solo: Will be displayed on the left/right sides of the slider
    • None: Don’t use navigation arrows.
  6. Always Show Navigation: Choose to always show the navigation elements (as opposed to the default value which is to only show the navigation on mouse hover).
  7. Hide Navigation After: Choose a time (in milliseconds) to hide the navigation after the user moves their mouse outside the slider area.
  8. Bullets / Thumbnail Position: Horizontal and Vertical alignment plus an offset pixel option (offset values will be in relation to the position).
  9. Left Arrow Position: Horizontal and Vertical alignment plus an offset pixel option (offset values will be in relation to the position).
  10. Right Arrow Position: Horizontal and Vertical alignment plus an offset pixel option (offset values will be in relation to the position).

 

Thumbnails

^ back to Slider Main Settings menu

These are thumbnail settings only. To enable thumbnails, edit the Navigation Settings.

 

Mobile Touch

^ back to Slider Main Settings menu

 

  1. Touch Enabled: Allow touch-swipe to navigate between slides on mobile.
  2. Swipe Velocity: A number between 0-1. Swipe sensitivity. Smaller values equal higher sensitivity.
  3. Swipe Min Touches: The minimum amount of fingers needed for a swipe action to occur.
  4. Swipe Max Touches: The maximum amount of fingers needed for a swipe action to occur.
  5. Drag Block Vertical: Prevent the page from scrolling when swipe actions occur.

 

Mobile Visibility

^ back to Slider Main Settings menu

Some of the options listed here are self-explanatory. So we’ll skip over those and only cover the ones that require further explanation.

  1. Hide Slider Under Width: Choose to hide the slider when the screen size is below a defined number. For example, if you wish to hide the slider on smartphones only, enter the number “641” here.
  2. Hide Defined Layers Under Width: (Enter the number 0 if you don’t plan to use this option). A screen width number to hide only certain layers. “Defined Layers” are individual slide layers you’ve chosen to hide under this value. Individual layers can designated for “hiding” by editing the layer settings as shown in the following screenshot:

  3. Hide All Layers Under Width: (Enter the number 0 if you don’t plan to use this option). Hide all slider layers when the screen’s width is below this number (regardless of the layer’s individual “Hide Under Width” value as described above).
  4. Hide Thumbs Under Width: A screen width number to hide the thumbnails under. For example, there may not be enough room for thumbnails on a smartphone. If that’s the case, enter the number “641” here.
  5. Hide Mobile Nav After: An amount of time to hide the navigation after it appears (in milliseconds).

 

Single Slide

^ back to Slider Main Settings menu

If your slider only has one slide, this option can be used to run the single slide through a continuous loop.

 

Alternative First Slide

^ back to Slider Main Settings menu

These options can be used to display a specific slide first when the page loads, and also override that slides animation the first time the slider loads.

  1. Start With Slide: Load a specific slide number when the slider first loads on the page.
  2. First Transition Active: Use a custom transition for the first slide transition (will only be applied when the slider first loads).
  3. First Transition Type: An optional alternative transition for the first slide when the slider first loads.
  4. First Transition Duration: A custom transition duration when using a custom transition type (described above).
  5. First Transition Slot Amount: A custom value for a “slots-based” custom transition (use a number 7 or less).

 

Global Overwrites

^ back to Slider Main Settings menu

Use this option to globally apply a specific transition type and transition duration to every slide.

 

CSS / JavaScript

^ back to Slider Main Settings menu

This section allows you to add custom CSS and JavaScript to pages that only contain the slider. Click here for a good example of using Custom CSS.