Your first slider

If you’ve followed the Getting Started guide, by now you should have the assets needed for slidea in the right place and included in the webpage.

Marking up a slidea slider is very simple. We have a .slidea parent which contains multiple .slidea-slide slides. The images use the .slidea-background class let slidea know it needs to treat the image as our slide’s background.

<!-- Slidea -->
<div class="slidea">
  <!-- Slide -->
  <div class="slidea-slide">
    <!-- Background -->
    <!-- To change the background, modify the src=".." attribute -->
    <img class="slidea-background" src="assets/img/slide-1.jpg">
  </div>

  <!-- Slide -->
  <div class="slidea-slide">
    <!-- Background -->
    <!-- To change the background, modify the src=".." attribute -->
    <img class="slidea-background" src="assets/img/slide-2.jpg">
  </div>

  <!-- Slide -->
  <div class="slidea-slide">
    <!-- Background -->
    <!-- To change the background, modify the src=".." attribute -->
    <img class="slidea-background" src="assets/img/slide-3.jpg">
  </div>
</div>

Place the code above at the beginning of your <body> tag to use slidea as a header slider.

I want to show a loading spinner

If we want to hide the slider until images are loaded, we’ll need to add the markup for a loader. The loader component will be placed right after opening the <div class="slidea"> tag.

<!-- Slidea -->
<div class="slidea">
  <!-- Loading Spinner -->
  <div class="slidea-loader-wrapper">
    <div class="slidea-loader">
      <img src="assets/img/loader.gif" width="40" height="40">
    </div>
  </div>

  ...

</div>

If you want to use your own preloader image, you can replace the loader.gif file in your assets/img folder.

Ready, steady, go!

Now that we’ve added the markup for our slider, all that’s left for us to do is to initialize slidea. Place the following initialization script before the end of your <body> tag, right after all the scripts we’ve included earlier.

<script>
$(document).ready(function(){
  $('.slidea').slidea();
});
</script>

Whoa!

Your first slider is ready. Your result should look just like this one:

Here’s the complete code for a page containing slidea. If you’ve done everything correctly, your page markup should follow the pattern below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My webpage</title>

    <!-- Slidea Stylesheets -->
    <link href="assets/css/slidea/slidea.css" rel="stylesheet">
    <link href="assets/css/slidea/themes/default.css" rel="stylesheet">
    <link href="assets/css/slidea/ui/default.css" rel="stylesheet">
  </head>
  <body>
    <!-- Slidea -->
    <div class="slidea">
      <!-- Loading Spinner -->
      <div class="slidea-loader-wrapper">
        <div class="slidea-loader">
          <img src="assets/img/loader.gif" width="40" height="40">
        </div>
      </div>

      <!-- Slide -->
      <div class="slidea-slide">
        <!-- Background -->
        <!-- To change the background, modify the src=".." attribute -->
        <img class="slidea-background" src="assets/img/slide-1.jpg">
      </div>

      <!-- Slide -->
      <div class="slidea-slide">
        <!-- Background -->
        <!-- To change the background, modify the src=".." attribute -->
        <img class="slidea-background" src="assets/img/slide-2.jpg">
      </div>

      <!-- Slide -->
      <div class="slidea-slide">
        <!-- Background -->
        <!-- To change the background, modify the src=".." attribute -->
        <img class="slidea-background" src="assets/img/slide-3.jpg">
      </div>
    </div>

    <!-- Slidea Scripts -->
    <script src="assets/js/jquery/jquery.js" type="text/javascript"></script>
    <script src="assets/js/gsap/tweenlite.js" type="text/javascript"></script>
    <script src="assets/js/gsap/plugins/css.js" type="text/javascript"></script>
    <script src="assets/js/gsap/easing/easepack.js" type="text/javascript"></script>
    <script src="assets/js/hammer/hammer.js" type="text/javascript"></script>
    <script src="assets/js/mousewheel/mousewheel.js" type="text/javascript"></script>
    <script src="assets/js/vimeo/vimeo.js" type="text/javascript"></script>
    <script src="assets/js/youtube/youtube.js" type="text/javascript"></script>
    <script src="assets/js/animus/animus.js" type="text/javascript"></script>
    <script src="assets/js/animus/presets/default.js" type="text/javascript"></script>
    <script src="assets/js/slidea/slidea.js" type="text/javascript"></script>

    <!-- Initialization Script -->
    <script>
      $(document).ready(function(){
        $('.slidea').slidea();
      });
    </script>
  </body>
</html>

Integrating into an existing website

slidea

Create a basic slideshow

Table of contents

Introduction

Getting Started

Settings and Configuration

Layouts

Components

Animation

API

Conclusion

Your first slider

I want to show a loading spinner

Ready, steady, go!

Whoa!