Navigation

Do not use navigation frameworks to avoid overlap with CT Presenter navigation methods.

Branches are sets of CLM presentation slides, single scenarios that run depending on the user’s choice. To navigate among scenarios, restrict default gestures on slides:

  • Activate the Fixed attribute of a Slide object to disable a default gesture to swipe a slide to the next one.

  • Default gestures are not in use to switch the last slide in a branch.

Switching Slides

To switch a slide:

  • Use default gestures for switching slides within a branch

  • Add in a slide markup one of the following methods to start a branch and switching among branches:

    • <a href="#slide[k]">Text</a>, where [k] is a slide order.

    • <a href="[n][k]_start_slide.html">Home</a>, where:

      • [n] is the number of a branch

      • [k] is the number of a slide in the appropriate branch

      • start_slide is a name of a file that represents a slide

        This markup works only for web browsers.

  • Use the CTAPPgoTo… methods or a library to process a default gesture, for example, hammer.js, to switch the last or fixed slide.

CTAPPgoTo… Methods

Use these methods in a slide markup to switch among slides and branches, including the fixed and last slides:

Method Action

CTAPPgoToSlide(slideNum)

Jump to a specific slide.

CTAPPgoToPrevious()

Jump to the previousslide.

CTAPPgoToNext()

Jump to the next slide.

CTAPPgoToFirst()

Jump to the first slide.

To use CTAPPgoTo… methods:

  1. Create a slide-name.html with the following markup and upload it to Salesforce:

    <!DOCTYPE html>
<html>
  <head>

      <script type="text/javascript" src="../JSLibrary/js/app.js"></script> <!—the required JS library for each slide -->

  </head>
   </div>
           <!-- content -->
           <div class="brand_catalog">

              <div class="brand_catalog__item" data-brand=“category_A”>
                     Lorem ipsum dolor sit amet
              </div>
              <div class="brand_catalog__item" data-brand=“ category_B”>
                     Lorem ipsum dolor sit amet
              </div>
              <div class="brand_catalog__item" data-brand=“ category_C”>
                     Lorem ipsum dolor sit amet
              </div>
              <div class="brand_catalog__item" data-brand=“ category_D”>
                   Lorem ipsum dolor sit ame
              </div>

         </div>

   </body>
</html>

  2. Create a script with the CTAPPgoTo… methods:

    <script>

$(document).ready(function () {

         //  brands
$(“. brand_catalog__item”).on("click", function(e){

         var brandName = this.getAttribute("data-brand");

         switch (brandName) {
                case "category_A":
                          CTAPPgoToSlide('11');
                           break;
                case "category_C":
                          CTAPPgoToSlide('31');
                          break;
                default:
                       CTAPPgoToNext();
            };
});

</script>

Example of Transitions between Slides

ctpresenter transition between slides example
``