Slides
Last updated
Last updated
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:
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.
You have the following effects: zen, cards, zoom, film, stack, vertigo, chain and plain. Use to pick a style you want. Here is an example of a stack 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>.
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.
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.
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.
You can change the effect speed by adding the following code after the main slides.js script.
You can disable the default pre-loading feature of Slides by adding noPreload class on <body>:
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:
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.
Or you can apply your color as a style directly on background layer:
You can also use an image as the background of any slide:
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.
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 use HTML5 background video on slides. Here is an example:
You can also use HTML5 background video on slides by adding an animated gif background element as shown here:
You can animate the appearance of elements on the selected slides. Be sure you've added animated class on <body>.
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.
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 by adding the following parameter somewhere on the page:
You can prevent a slide change on mouse scroll for by adding the following parameter somewhere on the page:
You can adjust the minimum scroll size required to change the slide for by adding the following parameter somewhere on the page:
Using the you might want to use an autoHeight class on your slide section to set the height of the slide to auto.
If you want to adjust the default speed, use additional classes slow and fast on <body> element. It will change the speed of and slide changes.
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 and easing when slides change.
To add an ability to , simply add animated class on <body>:
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 and the entire page with :
Here is an .
.
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 dots on panels. You can also add custom CSS to update the color of elements on WhiteSlide panels.
To change the background color of your slide, simply add a color class to your slide element. You can find all colors .
.
You can find all the background effects .
.
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 .
View all examples of element animation .