Slides Framework
Search…
⌃K

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 the 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 Effect and animations on Mobile Devices

If you don't want to use Slides Effect (scrolling page screen-to-screen) on touch screen devices (mobile phones, tablets) and want to replace it to 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 a 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 default speed, use additional classes slow and fast on <body> element. It will change the speed of element appearances and slide changing.
<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 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 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 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.
<body class="slides scroll stickyScroll">
<section class="slide"></section>
<section class="slide"></section>
<section class="slide unstick"><!-- Sticky scroll wil not be applied to this slide --></section>
<section class="slide"></section>
<section class="slide"></section>
</body>

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 a 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 slides page by clicking on link elements with href tags containing your link:
<a href="#hash">Open #hash slide</a>
You can turn off the default URL hash setting function on Slide change by adding a 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>

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 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>

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.

JavaScript

Options

There are a few variables that you can change in the js/slides.js file to customize your page. Here is the full list with the default values:
window.debug = 0;
window.inAction = 1;
window.allowSlide = 1;
window.blockScroll = 1;
window.effectOffset = 500;
window.effectSpeed = 1000;
window.slideSpeed = 1000;
window.cleanupDelay = 1400;
window.horizontalMode = 0;
window.sidebarShown = 0;
window.loadingProgress = 0;
window.smoothScroll = 0;
window.scrollSpeed = 0.5;
window.preload = 1;
window.setHashLink = 1;
window.hideSidebarOnBodyClick = 1;
window.collectScrolls = 0;
window.sliderStatus = 0;
window.minScrollToSlide = 500;
window.minSwipeToSlide = 4;
window.enableMobileZoom = 0;
window.hideOnScrollSensitivity = 100;
window.allowParallaxOnMobile = 1;
window.hidePopupOnBodyClick = 1;
window.disableKeyNavigation = 0;

Events

There are few callbacks that allow you to execute your custom code after some events on your page:
<script>
// The slide is changed
$(window).on('slideChange',function(event, number, element){
// Your code here, for example:
console.log( "Current slide is " + $(element).data('title') + " #" + number);
});
// The slide is changed and the animation if slide chnage is finished
$(window).on('slideChange',function(event, number, element){
setTimeout(function(){
// Your code here, for example:
console.log("Animation is finished");
// You can also checkout an example: https://designmodo.com/slides/app/preview/example/trigger/
},window.effectSpeed);
});
// The popup is shown
$(window).on("popupShown",function(event, popupID){
// Your code here, for example:
console.log("The popup with data-popup-id='"+popupID+"' is shown");
});
// The popup is closed
$(window).on("popupHidden",function(event, popupID){
// Your code here, for example:
console.log("The popup is closed. "+(popupID ? "data-popup-id='"+popupID+"'" : ''));
console.log('Note that popupID!==false only if the popup was closed using the window.hidePopup(popupID) method.');
});
// The dropdown is shown
$(window).on("dropdownShown",function(event, dropdownID){
// Your code here, for example:
console.log("The dropdown with data-dropdown-id='"+dropdownID+"' is shown");
});
// The dropdown is closed
$(window).on("dropdownHidden",function(event, dropdownID){
// Your code here, for example:
console.log("The dropdown is closed. "+(dropdownID ? "data-dropdown-id='"+dropdownID+"'" : ''));
console.log('Note that dropdownID!==false only if the dropdown was closed using the window.hideDropdown(dropdownID) method.');
});
// The sidebar is shown
$(window).on("sidebarShown",function(event, sidebarID){
// Your code here, for example:
console.log("The sidebar with data-sidebar-id='"+sidebarID+"' is shown");
});
// The sidebar is closed
$(window).on("sidebarHidden",function(event){
// Your code here, for example:
console.log("The sidebar is closed.");
});
</script>
Need more events for your development purposes? Please, let us know!

Methods

You can use these javascript functions to manipulate your slides page:
<script>
window.changeSlide(1); // go to first slide;
window.changeSlide("increase"); // go to the next slide;
window.changeSlide("decrease"); // go to the previous slide;
window.showPopup("popupID", "inputID"); // Open the popup with data-popup-id="popupID" and (optionally) focus on the form field with id="inputID" in this popup
window.hidePopup("popupID"); // Close the popup with data-popup-id="popupID". If the popupID is not provided - all opened popups will be closed.
window.showDropdown($(".dropdownTrigger[data-dropdown-id='dropdownID']")); // Open the dropdown with data-dropdown-id="dropdownID"
window.hideDropdown("dropdownID"); // Close the dropdown with data-dropdown-id="dropdownID". If the dropdownID is not provided - all opened dropdowns will be closed.
window.showSidebar("sidebarID"); // Open the sidebar with data-sidebar-id="sidebarID".
window.hideSidebar(); // Close all sidebars.
window.isElementInView(".selector"); // Returns true if $(".selector") element is visible and false if not.
window.updateNavigation(); // Marks navigation element as selected depending on selected now slide.
window.unzoomImage(); // Hides previously zoomed-in image, check the https://slides.gitbook.io/manual/components#zoom-image
window.equalizeElements(); // Sets equal heights to the .equalElement in the .flex.equal container, check the https://slides.gitbook.io/manual/components#flex-equalizer
</script>

Debug mode

You can switch your page into development mode and check in the browser console (⌘|Ctrl + Shift + I) which functions are called in the different moments.
You can enter the debug mode in three different ways:
  • Add <script> window.debug = 1; </script> right after js/slides.js or js/slides.min.js script;
  • Add #slidesDebug to the end of your page URL;
  • Set cookie with name slidesDebug and any value for your page
Then open the browser console and reload your page.
Last modified 4mo ago