Swipe Through Slides on Mobile

April 16, 2014

We're excited to announce a new experience for our mobile users: When visiting SlideShare from your phone or tablet, you can now swipe through a presentation or document, in both landscape and portrait mode.

Having recently launched a new homepage and browsing experience on our mobile site, we are pleased to continue improving how you discover, view and share SlideShares on-the-go. This new, intuitive feature supports the natural desire to swipe slides when using a mobile device. In addition, you can now also jump to various slides of a presentation using a new preview bar that displays the individual slides of a deck.

Swipe gestures on mobile devices may seem simple for the user, but there's a lot of technical work behind the feature. It took us one full-time engineer, two design iterations and three straight weeks of coding to implement.

How, exactly, does swiping work? Here's a general explanation from our engineer, Mark Lee, who implemented it.

-Translating 'swipe' to mean 'next slide':  A library is an open-source piece of code that is made public for all developers to use and build upon. Touch events are actions you do with your mobile phone such as drag, touch, pinch and double tap. We used the JavaScript library, hammer.js, for touch events. We used this particular library because it has an easy-to-use application programming interface (API) that "translates" mobile gestures for us. In other words, if we didn't use this library it would have been like we were trying to have a conversation in English with someone who didn't speak English. The library serves as a translator who simplifies things for us (for example, a line like "Hi, nice to meet you" would be translated by the translator as "greeting"). This translation provides us with the interface for simple gestures such as swipe, drag, touch, etc. so that our team can build responses to those actions.

-Making the next slide appear: Once we were able to able to translate a swipe gesture to mean "advance to the next slide," we needed to make that next slide appear quickly and smoothly. To do this, we used CSS transitions and hardware accelerations for drag and swiping animations. CSS transitions control the speed at which you see CSS properties -- which include anything stylistic, such as color and font size -- change on the screen. Hardware accelerations use the graphics processing unit (GPU) instead of the central processing unit (CPU) to move elements on the screen. In other words, we were able to bypass the software layer and go directly to the hardware layer, which is faster. This leads to faster and smoother transitions on mobile devices.

Pairing the swipe logic with the transitions accelerator creates the swiping capability you'll now see on our mobile web site.

“It’s a better user experience overall,” says Jean Edouard Benois, our engineer who came up with the project during an internal hack day.

Let us know what you think!

Read More: Bringing Presentations Into the Mobile Age