Slides

Slides should be placed in the root of your site inside the <body> element. The order of slides on the site will depend on the order of slides in your code. Here is an example of a simple slide layout:

<section class="slide">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
</section>

Effects

To change the default effect on slide changes, choose one of the effect classes provided by Slides. Add the effect class you prefer on the <body> element.

Slide Effect

You have the following effects: zen, cards, zoom, film, stack, vertigo, chain and plain. Use Template Generator to pick a style you want. Here is an example of a stack effect:

<body class="slides stack">

<!-- Your slides are here -->

</body>

Effect Offset

By default elements start their animation after the slide animation is finished. But you can change the offset for the animation of the elements to start for Slide Effect by adding the following parameter somewhere on the page:

<!-- for desktop -->
<script> window.effectOffset = 500; //default value </script>

Disable Scroll

You can prevent a slide change on mouse scroll for Slide Effect by adding the following parameter somewhere on the page:

<!-- for desktop -->
<script> window.disableOnScroll = 1; </script>

<!-- for mobile -->
<script> window.disableOnSwipe = 1; </script>

Adjust Minimum Scroll/Swipe to Slide

You can adjust the minimum scroll size required to change the slide for Slide Effect by adding the following parameter somewhere on the page:

<!-- for desktop -->
<script> window.minScrollToSlide = 500; //default value </script>

<!-- for mobile -->
<script> window.minSwipeToSlide = 35; //default value </script>

Scroll Effect

If you want to add a classic scroll to your page to make it look more classic, add a class scroll on your <body>.

<body class="slides scroll">

<!-- Your slides are here -->

</body>

Disable Slide Effects and animations on Mobile Devices

If you don't want to use Slides Effect (scrolling page screen-to-screen) on touchscreen devices (mobile phones, tablets) and want to replace it with a regular scroll, add a class simplifiedMobile on your <body>. It could be useful if you've got a lot of content inside some slides or just don't want to use this effect on mobile devices.

You can also switch on/off this setting directly in Slides app - go to "Additional Settings" and turn on/off "Simplified Mobile" toggle.

Auto Height

Using the Scroll Effect you might want to use an autoHeight class on your slide section to set the height of the slide to auto.

<section class="slide autoHeight">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- I'm short and wide :) -->

      </div>
    </div>
  </div>
</section>

Parameters

Speed

If you want to adjust the default speed, use additional classes slow and fast on <body> element. It will change the speed of element appearances and slide changes.

<body class="slides slow">

<!-- Your slides are here -->

</body>

Easing

If you want to adjust easing during a slide change, use additional classes smooth and bounce on <body> element. It will change the speed of element appearances and easing when slides change.

<body class="slides smooth">

<!-- Your slides are here -->

</body>

Direction

If you want to set slide changes to horizontal mode, use horizontal a class on the <body> element. This will change the direction of slide changes as well as the swipe direction on mobile devices and tablets.

<body class="slides horizontal">

<!-- Your slides are here -->

</body>

Animation

To add an ability to animate elements, simply add animated class on <body>:

<body class="slides animated">

<!-- Your slides are here -->

</body>

Smooth Scroll

You can add the Smooth Scroll feature by adding scroll andsmoothScroll classes on <body>. Scrollable content will scroll smoothly to match the look and feel of Slides. This smooth scroll applies to all slides under Slide Effect and the entire page with Scroll Effect:

<body class="slides scroll smoothScroll">

<!-- add -->

</body>

Sticky Scroll

There is also another available scroll effect that can be switched on by adding stickyScroll and scroll classes on <body>. When the scroll ended the page will be automatically scrolled to the start of the closest section, so the user will always see the slide fully visible. You can also disable this effect for the exact slide by adding unstick class to the .slide.

Here is an example.

<body class="slides scroll stickyScroll">
    <section class="slide"></section>
    <section class="slide"></section>
    <section class="slide unstick"><!-- Sticky scroll will not be applied to this slide --></section>
    <section class="slide"></section>
    <section class="slide"></section>
</body>

You can change the effect speed by adding the following code after the main slides.js script.

<script>
  window.stickyScrollEffectSpeed = 500;
</script>

Preloading Control

You can disable the default pre-loading feature of Slides by adding noPreload class on <body>:

<body class="slides noPreload">

<!-- add -->

</body>

Content Position

By default, all content is centered on the x- and y-axis. You can change this position by adding top, bottom, left and right classes on your slide section:

<section class="slide">
  <div class="content">
    <div class="container">
      <div class="wrap left bottom">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
</section>

Navigation By #hash

You can add an anchor link on any slide you want using the data-name attribute.

<section class="slide" data-name="hash">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
</section>

Now you can open any slide you want by visiting http://yoursite.com/#hash or right from the slides page by clicking on link elements with href tags containing your link:

<a href="#hash">Open #hash slide</a>

Example.

You can turn off the default URL hash setting function on Slide change by adding the following code after the main slides.js script.

<script>
  window.setHashLink = 0;
</script>

White Slide

The text color on slides and panels is white by default. You can add whiteSlide class on your slide section to invert the text color and the color of SVGs and navigation dots on panels. You can also add custom CSS to update the color of elements on WhiteSlide panels.

<section class="slide whiteSlide">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
</section>

Background

Background Color

To change the background color of your slide, simply add a color class to your slide element. You can find all colors here.

<section class="slide green">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
  <div class="background"></div>
</section>

Or you can apply your color as a style directly on background layer:

<section class="slide">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
  <div class="background" style="background:#B0D1E5"></div>
</section>

Background Image

You can also use an image as the background of any slide:

<section class="slide">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
  <div class="background" style="background-image:url(assets/img/background/img-1.jpg)"></div>
</section>

Fading

To achieve different blending effects, you can vary the amount of opacity for a background color or image used in your design. Using class fade-X, where X is amount of fade.

<section class="slide fade-4">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
  <div class="background" style="background-image:url(assets/img/background/img-1.jpg)"></div>
</section>

Example.

Background Animation

All of the default slides and templates in Slides have animated background image effects. You can choose from four different animated effects to modify the appearance of your backgrounds. You can choose kenBurns, kenBurns zoomin, scenic or parallax:

<section class="slide fade-6 kenBurns">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
  <div class="background" style="background-image:url(../docs/assets/img/img-1.jpg)"></div>
</section>

You can find all the background effects here.

Background Video

You can use HTML5 background video on slides. Here is an example:

<section class="slide fade-6 video">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
  <div class="background">
    <video poster="/path/to/poster.jpg" autoplay="" loop="" muted="">
      <source src="/path/to/video.mp4" type="video/mp4">
      <source src="/path/to/video.webm" type="video/webm">
      <source src="/path/to/video.ogv" type="video/ogv">
    </video>
  </div>
</section>

Mobile Support for Background Videos

You can also use HTML5 background video on slides by adding an animated gif background element as shown here:

<section class="slide fade-6 video">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
  <div class="background" style="background-image:url('/path/to/mobile-video.gif');">
    <video poster="/path/to/poster.jpg" autoplay="" loop="" muted="">
      <source src="/path/to/video.mp4" type="video/mp4">
      <source src="/path/to/video.webm" type="video/webm">
      <source src="/path/to/video.ogv" type="video/ogv">
    </video>
  </div>
</section>

Example.

Element Animation

You can animate the appearance of elements on the selected slides. Be sure you've added animated class on <body>.

Order

You can set your order of appearance by setting an ae-X number. The higher the number, the later it will appear. You can use up to 10 animated elements. The speed of occurrence of elements depends on the main speed.

<section class="slide">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <h1 class="ae-1">I will appear first</h1>
        <p class="ae-2">I will appear second</p>
        <button class="ae-3">I will appear third</button>

      </div>
    </div>
  </div>
</section>

Direction

By default, all elements are shown from the bottom up. You can change this by adding suitable classes: fromLeft, fromTop, fromRight, fromBottom, fromCenter, fromBlur and fromAbove.

<section class="slide">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <h1 class="ae-1 fromTop">I will appear from top</h1>
        <p class="ae-2 fromLeft">I will appear from left</p>
        <button class="ae-3 fromCenter">I will appear from center</button>

      </div>
    </div>
  </div>
</section>

You can change this for all animated elements at once by adding the desired direction class on slide element or even on <body>, which will apply to animation direction on all sections and slides on a page.

<section class="slide fromLeft">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <h1 class="ae-1">I will appear from left</h1>
        <p class="ae-2">I will appear from left</p>
        <button class="ae-3 fromBottom">I will appear from bottom</button>

      </div>
    </div>
  </div>
</section>

View all examples of element animation here.

PreviousGet Started NextPanels

Last updated 8 months ago