JavaScript is a programming language that allows for dynamic and interactive web experiences. Learn how you can customize the behavior of Slides' pages to meet specific needs and preferences.
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:
// Debugging flag (all events except scrolling logged in the browser console)
window.debug = window.debug ? window.debug : 0;
if(window.location.href.indexOf("slidesDebug")!=-1){window.debug = 1;}
// Debugging flag (only scrolling/slide change events logged in the browser console)
window.scrollDebug = window.scrollDebug ? window.scrollDebug : 0;
if(window.location.href.indexOf("slidesScrollDebug")!=-1){window.scrollDebug = 1;}
// Flag indicating whether an action is currently in progress
window.inAction = 1;
// Flag indicating whether slide change is allowed
window.allowSlide = 1;
// Flag indicating whether regular scrolling is blocked
window.blockScroll = 1;
// Offset for the slide effect (ms)
window.effectOffset = 500;
// Speed of the slide effect (ms)
window.effectSpeed = 1000;
// Speed of the slide animation (ms)
window.slideSpeed = 1000;
// Delay for element animation classes clean up after the slide effect (ms)
window.cleanupDelay = 1400;
// If set, effectSpeed, effectOffset, slideSpeed, cleanupDelay will be detected from CSS classes, not from JS code
window.setAnimFromCSS = 1;
// Flag indicating whether the horizontal mode is enabled (slide effects only)
window.horizontalMode = 0;
// Progress of loading (0.5 = 50% loaded)
window.loadingProgress = 0;
// Flag indicating whether smooth scrolling is enabled
window.smoothScroll = 0;
// Speed of smooth scrolling
window.scrollSpeed = 500;
// Flag indicating whether sticky scroll effect is enabled
window.stickyScroll = 0;
// Speed of the sticky scroll effect
window.stickyScrollEffectSpeed = 500;
// Flag indicating whether scroll collection is enabled
window.collectScrolls = 0;
// Flag indicating whether preload is enabled
window.preload = 1;
// Flag indicating whether setting hash link is enabled (page.html#slide)
window.setHashLink = 1;
// Flag indicating whether the sidebar is shown now
window.sidebarShown = 0;
// Flag indicating whether the sidebar should be hidden on the body click
window.hideSidebarOnBodyClick = 1;
// Flag indicating whether popup should be hidden on body click
window.hidePopupOnBodyClick = 1;
// Add the status of the slider as a class on the body (slider_name, slider_name_0);
window.sliderStatus = 0;
// Scroll sensitivity for slide change. The larger value will force user to make larger motion on touchpad / scroll more mousewheel steps.
window.minScrollToSlide = 200; // Default - for PC mousewheel, mostly
if(window.isAndroid){window.minScrollToSlide = 50;} // For Android touchscreens
if(window.isSafari && window.isMobile){window.minScrollToSlide = 70;} // For iPhone touchscreens
// Timeout to prevent the immediate change of a slide with a scrollable content in it when the end of the content is reached
window.awaitToSlideDown = 300;
// Pass the width of a frame as this var if you include this page into another one as an iframe.
// Do that from the parent page like this: $("#iframe").get(0).contentWindow.frameWidthToDetectZoom = $("#iframe").width();
//window.frameWidthToDetectZoom = 1234;
// Sensitivity for hiding elements on scroll
window.hideOnScrollSensitivity = 100;
// Flag indicating whether parallax is enabled on mobile devices
window.allowParallaxOnMobile = 1;
// Flag indicating whether key navigation is disabled
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 the 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 Slider (carousel) component is changed - added since Slides v.7
$(window).on("sliderChanged",function(e, sliderID, selectedSlides, triggerEl){
// Your code here, for example:
console.log("The slider with data-slider-id='"+sliderID+"' is changed, moving to slide ",selectedSlides,"the trigger is ",triggerEl);
});
// 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 (the 'trigger' argument is added since Slides v.7)
$(window).on("dropdownShown",function(event, dropdownID, trigger){
// Your code here, for example:
console.log("The dropdown with data-dropdown-id='"+dropdownID+"' is shown. The trigger is: ",trigger);
});
// 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
window.runAnimation(".slide:eq(2)").then(function(){alert("animation is played");}); // Runs animation in the desired slide. Added since Slides v.7
window.resetAnimation(".someEl").then(function(){alert("animation reset finished. Play it it again using runAnimation() method.");}); // Reset already played animation of any element on the page. Added since Slides v.7
</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 four 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;
Add ?slidesDebug=1 to your page URL;
Set cookie with name slidesDebug and any value for your page. Type in the browser console: $.cookie("slidesDebug",true); to do that.
Then open the browser console and reload your page.
Scroll debug mode (added since Slides v.7)
The debug mode does not log scroll/slide change events. To enable logging of these events, use slidesScrollDebug instead of slidesDebug as mentioned in the debug mode section.
