JS

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.