Let’s see some magic

The classic fade animation isn’t bad, but slidea isn’t a classic slider. We need some more action! Let’s use some presets to make our animation awesome:

To setup the animation like above we’ll need to update the initialization script that we added in the previous part as follows:

<!-- Initialization Script -->
<script>
$(document).ready(function(){
  $('.slidea').slidea({
    animation: {
      initial: "slideUpBigIn",
      out: "expandOut"
    }
  });
});
</script>

The initial animation is the state of the slide as soon as it appears. The out parameter sets the state of the slide when going to the next or previous slide.

What animation presets does slidea have?

Slidea comes with over 40 animation presets. To see a list of all the possible animation presets make sure you check out the animation presets guide.

You’re not limited to presets

Unlimited animations, anything you can imagine. With slidea you can create amazing keyframed custom animations, which we’ll also cover later in the documentation.