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
window.debug = 0;

// Flag indicating whether an action is currently in progress
window.inAction = 1;

// Flag indicating whether sliding is allowed
window.allowSlide = 1;

// Flag indicating whether 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;

// Flag indicating whether the horizontal mode is enabled (slide effects only)
window.horizontalMode = 0;

// Flag indicating whether the sidebar is shown
window.sidebarShown = 0;

// Progress of loading (0.5 = 50% loaded)
window.loadingProgress = 0;

// Flag indicating whether smooth scrolling is enabled
window.smoothScroll = 0;

// Flag indicating whether sticky scroll effect is enabled
window.stickyScroll = 0;

// Speed of the sticky scroll effect
window.stickyScrollEffectSpeed = 500;

// Speed of smooth scrolling
window.scrollSpeed = 500;

// 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 should be hidden on the body click
window.hideSidebarOnBodyClick = 1;

// Flag indicating whether scroll collection is enabled
window.collectScrolls = 0;

// Add the status of the slider as a class on the body (slider_name, slider_name_0); 
window.sliderStatus = 0;

// Minimum scroll amount required for a slide
window.minScrollToSlide = 200;

// Minimum swipe amount required for a slide
window.minSwipeToSlide = 4;

// Flag indicating whether image zoom on mobile is enabled
window.enableMobileZoom = 0;

// Sensitivity for hiding elements on scroll
window.hideOnScrollSensitivity = 100;

// Flag indicating whether parallax is enabled on mobile devices
window.allowParallaxOnMobile = 1;

// Flag indicating whether popup should be hidden on body click
window.hidePopupOnBodyClick = 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 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.

PreviousComponentsNextSCSS

Last updated