Setting up the slider

Besides the setup method we’ve seen in the Settings and Configuration section, you can setup the basic slider options such as default animation and layout using data-attributes.

<!-- Slidea -->
<div class="slidea"
     data-slidea="fadeIn" data-slidea-out="fadeOut" data-slidea-duration="750"
     data-slidea-layout="default">
</div>

Can I setup everything using javascript?

Yes! Using the slide data settings, you can set animation data, sizes and positions using javascript. You can do that by selecting the components (slides, layers and objects) using their index, id and class.

Selecting by index

Here’s how you can select and setup the slider components using their index.

$('.slidea').slidea({
  slide: {
    '0': {
      background: {
        '0': {
          initial: 'opacity 0, scale 2'
          out: 'opacity 0, scale 0'
        }
      }
      layer: {
        '0': {
          initial: 'opacity 0, scale 2'
          out: 'opacity 0, scale 0'
        }
      }
      object: {
        '0': {
          initial: 'opacity 0, scale 2'
          out: 'opacity 0, scale 0'
        }
      }
    }
  }
});

For consistency, we’ll also need to specify the index 0 for backgrounds, because of the way Slidea animates elements.

Selecting by id

You can also select the slide, layer or object by id, making it easy to target specific elements.

$('.slidea').slidea({
  slide: {
    '#second-slide': {
      background: {
        '0': {
          initial: 'opacity 0, scale 2'
          out: 'opacity 0, scale 0'
        }
      }
      layer: {
        '#second-slide-layer': {
          initial: 'opacity 0, scale 2'
          out: 'opacity 0, scale 0'
        }
      }
      object: {
        '#second-slide-heading': {
          initial: 'opacity 0, scale 2'
          out: 'opacity 0, scale 0'
        }
      }
    }
  }
});

Selecting by class

Selecting by class is the most general targeting system and it’s perfect if you want to specify animation properties for elements with a certain class.

$('.slidea').slidea({
  slide: {
    '.slidea-slide': {
      background: {
        '0': {
          initial: 'opacity 0, scale 2'
          out: 'opacity 0, scale 0'
        }
      }
      layer: {
        '.slidea-layer': {
          initial: 'opacity 0, scale 2'
          out: 'opacity 0, scale 0'
        },
        '#second-slide-layer': {
          initial: 'opacity 0, scale 5'
          out: 'opacity 0, scale 0'
        }
      }
      object: {
        '.slidea-object': {
          initial: 'opacity 0, scale 2'
          out: 'opacity 0, scale 0'
        }
      }
    }
  }
});

As you can see above, we can combine the selection modes in any way we want.

Using slide data to setup animation

You can set animation data just like you would with data-attributes.

$('.slidea').slidea({
  slide: {
    '.slidea-slide': {
      object: {
        '.slidea-object': {
          start: 2000,
          initial: 'opacity 0, scale 2',
          4000: 'rotationZ 30',
          5000: 'rotationZ -30',
          6000: 'rotationZ 0',
          out: 'opacity 0, scale 0',
          loop: true
        }
      }
    }
  }
});

Using slide data to setup sizes

You can even set size specific data for layers.

$('.slidea').slidea({
  slide: {
    '.slidea-slide': {
      background: {
        '0': {
          duration: 500
        }
      }
      layer: {
        '0': {
          top: 0,
          left: 0,
          width: 500,
          height: 600
        }
      }
    }
  }
});