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:
Disable Scroll
You can prevent a slide change on mouse scroll for Slide Effect by adding the following parameter somewhere on the page:
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:
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>.
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.
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.
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.
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.
Animation
To add an ability to animate elements, simply add animated class on <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:
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.
You can change the effect speed by adding the following code after the main slides.js script.
Preloading Control
You can disable the default pre-loading feature of Slides by adding noPreload class on <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:
Navigation By #hash
You can add an anchor link on any slide you want using the data-name attribute.
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:
You can turn off the default URL hash setting function on Slide change by adding the following code after the main slides.js 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.
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.
Or you can apply your color as a style directly on background layer:
Background Image
You can also use an image as the background of any slide:
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.
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:
You can find all the background effects here.
Background Video
You can use HTML5 background video on slides. Here is an example:
Mobile Support for Background Videos
You can also use HTML5 background video on slides by adding an animated gif background element as shown here:
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.
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.
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.
View all examples of element animation here.
Last updated