☰
Documentation

Base Settings

What can I configure?

Slidea is a modular plugin, where each pluggable module has its own settings. Here we will cover the configuration for the base module.

The base module

The base module handles all the animation and slider initialization logic. Here are the configuration options of the base module with their default values:

$('.slidea').slidea({
  // Default animation settings
  animation: {
    initial: "opacity 0",   // Default slide initial state
    out: "opacity 0",       // Default slide out state
    easing: "easeOutQuad",  // Default easing
    duration: 500           // Default duration
  },
  overlap: 1,               // Overlap slide transitions

  layout: "default",        // Active layout
  layerIndex: 99,           // Base layer index

  preload: 'fast',          // Preloading: fast, all
  loader: true,             // Use loading spinner

  duration: 4000,           // Slide autoplay duration
  autoplay: true,           // Autoplay slider
  loop: true,               // Loop autoplay

  touch: true,              // Enable touch interaction
  mousewheel: false,        // Slide on scroll
  keyboard: false,          // Slide when pressing keyboard arrows

  animate: 'TweenLite',     // GSAP Animator Class

  pauseOnHover: false,      // Stop autoplay on hover
  preventDragging: true,    // Disable dragging slide images

  // Responsive sizes
  screen: {
    xs: 0,
    sm: 768,
    md: 992,
    lg: 1200,
    xl: 1560
  },

  // Element selectors
  selector: {
    slide: ".slidea-slide",
    content: ".slidea-content",
    contentWrapper: ".slidea-content-wrapper",
    contentContainer: ".slidea-content-container",
    canvas: ".slidea-canvas",
    background: ".slidea-background",
    backgroundWrapper: ".slidea-background-wrapper",
    videoBackground: ".slidea-video-background",
    video: ".slidea-video",
    videoCover: ".slidea-video-cover",
    layer: ".slidea-layer",
    layerWrapper: ".slidea-layer-wrapper",
    object: ".slidea-object, .s-obj",
    objectWrapper: ".slidea-object-wrapper",
    next: ".slidea-next",
    prev: ".slidea-prev",
    inner: ".slidea-inner",
    wrapper: ".slidea-wrapper"
  }
});

Let’s see what each option is and what happens when you change it.

Option Description
animation Defines the slider’s default animation parameters. This animation will be used for all slides that do not have an individual animation set.
animation.initial Defines the default initial animation state.
animation.out Defines the default out animation state.
animation.easing Defines the default animation easing. Easings are provided by the GSAP EasePack plugin.
animation.duration Defines the default animation duration in milliseconds.
overlap Specifies whether to overlap slide transitions or not. The value 0 means complete overlapping and a value of 1 means no overlapping. Everything between 0 and 1 will overlap partially.
layout Specifies the current layout. Layouts change the way your slider behaves responsively.

Values: "default", "fluid", "content"
layerIndex Specifies the starting layer z-index. Follows a top-down approach, where top layers have higher z-index than lower ones.
preload Specifies slider preloading mode. The fast mode preloads the current and the next slide, allowing us to start the slider faster.

Values: "fast", "all"
preload The preload option is required to show and hide the loading spinner.
duration Specifies how much time (in milliseconds) a slide will show before autoplay transitions to the next slide.
autoplay When autoplay is enabled the slider will automatically animate to the next slide after the time delay we’ve set in the duration. You can pause the autoplay using the API or the available options.
loop This option will cause the slider to go to the first slide after it reaches the last slide.
pauseOnHover The pause on hover option will stop the autoplay timer when the mouse is hovering the slider.
preventDragging The prevent dragging option will stop slide image dragging. It is useful when using the touch plugin using a mouse cursor.
animate Specifies GSAP animator class, allowing you to easily swap to TweenMax.
touch Enable touch interactions.

The touch module requires the hammer.js plugin in order to work.
mousewheel The mousewheel option allows you to use the mouse wheel to go to the next or previous slide. There’s a timeout in order to prevent multiple scroll requests.

The mousewheel module requires the mousewheel.js plugin in order to work.
keyboard The keyboard module allows you to navigate to next and previous using the keyboard left and right arrows.
screen Specifies the responsive breakpoints used by some slidea modules.

Next, let’s see how each slidea module can be activated and configured.

Previous
Animating HTML content
Read Next
What's a module?