Forum Discussion

MaggieMahota's avatar
MaggieMahota
Community Member
7 months ago

How to move horizontally through a course

Hello! 

I am working on a training and would like it be a horizontal movement when you click continue instead of the vertical scrolling. Is this possible to accomplish? 

Thanks!

rise 360
  • KarlMuller's avatar
    KarlMuller
    Community Member
    7 months ago

    Yes, it's possible if you develop in Storyline instead of Rise.

  • CaryGlenn1's avatar
    CaryGlenn1
    Super Hero
    7 months ago

    Karl's correct. Rise only lets a user scroll vertically not horizontally. With Storyline you don't really scroll but you can simulate that the slides move horizontally. 

  • PhilFoss's avatar
    PhilFoss
    Community Member
    7 months ago

    I can't use Storyline due to mobile requirements, but this highly customized Rise microlearning theme has horizontal scroll. Here's a peek of the custom theme in action:

    • PhilFoss's avatar
      PhilFoss
      Community Member
      26 days ago

      Marko, I just watched my video 6 times trying to figure out why there's no audio and nearly broke my bluetooth headphones in the process. The video has no audio. But to achieve this you will need to install a Theme Component after exporting your course, the css used in this example is below. The only other way to add custom style information (CSS) to a Rise course is with a plugin developed by our friend JohnPinkster-19 Everyone should give thanks to the active designer/developer community here on the forum, as these efforts help to inform the Roadmap. Also credits to SamHill for recent innovations. It's an exciting time to be an ID. 

      p.s. I haven't fully tested this code on mobile, good luck! And Happy Thanksgiving.

      .lesson-one-page-slides__prev-btn {
  position: fixed;
  left: 20px;
  bottom: 20px;
  top: inherit;
  transform: rotate(-90deg) !important;
}

.lesson-one-page-slides__next-btn {
  transform: rotate(-90deg) !important;
}

.blocks-slide-controls__page-control-wrapper {display:none}


@keyframes one-page-slide-up-enter {
  0% {
    opacity:0;
    transform:translateX(100vw)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes one-page-slide-up-exit {
  0% {
    opacity:1;
    transform:translateX(0)
  }
  to {
    opacity:0;
    transform:translateX(-100vw)
  }
}
@keyframes one-page-slide-down-enter {
  0% {
    opacity:0;
    transform:translateX(-100%)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes one-page-slide-down-exit {
  0% {
    opacity:1;
    transform:translateX(0)
  }
  to {
    opacity:0;
    transform:translateX(100%)
  }
}

       

Related Content