December 9, 2015 | 20 Feedbacks

Presentation Slideshow

A simple presentation template in CSS and jQuery.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

Although presentations are usually created using native apps, we decided to challenge ourselves and design a presentation template for the browser. It wasn’t an easy task, for the way you interact with a presentation slideshow is different compared to how you scroll through a website: each unit/slide must be isolated, so that its content can be assimilated before switching to the next one.

How do you navigate through a presentation? The easiest way is to use keyboard arrow keys (for devices that have them). However we had to take into account that all other interactions (click, scroll…) had to work as well when building something for the web.

Let us know what you think in the comments section ;)

Creating the structure

The HTML structure is composed by two main elements: a <nav> for the slideshow navigation, and an ordered list for the slideshow items. We used a nested ordered list for items with multiple sub slides.

Adding style

On small devices (viewport width smaller than 1100px), we organized all slides as a simple list. For items with sub slides, though, we implemented a slider with drag/swipe interaction to navigate it.

The width of the ordered list items with sub slides is set using JavaScript. When a user navigates from a sub slide to the previous/next one, we translate the .sub-slides element (nested ordered list) along the X axis (more in the Events handling section).

On bigger devices, we set the .cd-slideshow-wrapper height to 100vh and add an overflow hidden, so that only the slide in the viewport is visible. We then set height, width and margin of the .cd-slider-content to center it in the viewport.
The .visible class is added to the visible slide: it is used to hide the .cd-slider-content::after pseudo-element (used to change the slide background color when the slide is out of focus) and show the slide content.

When a user navigates from a slide to the next/previous one, we translate the .cd-slideshow element along the Y axis (more in the Events handling section).

Events handling

The presentation can be navigated in different ways: using the keyboard; using the slideshow main navigation; clicking on slides out of focus or scrolling through the slides.

Two main functions have been used to implement the slideshow navigation: the updateSlide to navigate from a slide to the next/previous one, and the updateSubSlide to navigate from a sub slide to the next/previous one. For the updateSubSlide function, for example, we used:


Dec 09, 2015
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • drc15

    This is nice!

  • Nat Hobson

    This is great. My only feedback is that on a Macbook Pro, when you scroll on a track pad, unless you’re way more gentle than you normally would be, it scroll two panels as a time. I think there needs to be a little throttling there may?

    • pingram3541

      Or add a callback that listens for a duration threshold to be met before the transition is allowed fire, say 1-2 seconds should be enough without being annoying to the user experience wanting to rapidly scroll through slides. Found this on throttling –

  • Scott Blackburn

    @nathobson:disqus I think this is due to inertia scrolling and I’ve found it difficult to solve. There is a detailed discussion here: . The difficulty is normalising the distance scrolled across different devices.

    • pingram3541

      I just realized your reference also mentions the debounce method and can confirm it works very well.

      • Scott Blackburn

        I gave this a try but maybe I didn’t specify a long enough delay, I’ll give it another try. Thanks!

        • pingram3541

          After looking closer at the code’s scrollHijacking function it checks to see if a scroll threshold has been met and if so, fires off the change slide function. The default scrollThreshold is 6. The problem is sometimes the scroll count exceeds 6 which in turn fires the updateSlide function again if the count climbs to 7 or 8 or so on before the scroll count has been reset by the slide update. Changing the “is equal or greater than” to just “is equal” solved the problem for me. i.e. change ( Math.abs(delta) >= scrollThreshold) to ( Math.abs(delta) == scrollThreshold) this way any extra scroll counts, i.e 7, 8 etc. don’t do anything and once the slide update has completed the scroll count is reset for the next desired slide scroll.

  • MS Design BD

    Good one

  • Mike Gomez

    It would be a good add for desktop to scroll as the list goes on, 1, 2, 2.1, 2.2, 3, not jump from 2 to 3 if there are subitems; also a simple click to go next screen.

  • kingdomcreation

    Hi Claudia, any idea on how to add a script to block the keyboard or touch to display items individually on the slide before it transition to another slide… i’d like your vision on how to animate the inside of a slide, because of all the experience and understanding of your work, again thanks a lot for making these ressources. Some of the best stuff i found on the internet…

  • ayman ezzat

    Hi Claudia, very interesting one & thx for the share, I was wondering how to animate the content into a specific slide when the user reach it not when loading the website?

    Thx for the support

  • Christopher Jones

    As always, just brilliant. Flawless.

  • taylan

    Is it possible to update the URL and do DeepLinking? thank you.

  • pingram3541

    Nice write-up. This would go perfect with some .scale-ratio-n classes for a rapid mobile prototype too. I often come across stuff like this and move on simply because it often doesn’t pan out on a mobile phone and I’m too lazy I’m often way too busy to put in the work. =)

    This provides a perfect mold so thank you for that Claudia.

  • rickhenderson

    Interesting, but presentations usually only go in one direction, so having to choose down or left can be confusing. Perhaps it does add more flexibility for presentations this way, but perhaps more clues that “sideways” to the sub is an option would be useful.

  • Tofanelli

    Hi Claudia….. nice coding here….. but…. mind to check mobile version? I guess the slides are not working….

    and maybe a easing effect between sections =D

    Cheers =D

  • César Robles

    hi, is possible go to slide with a image link? thanks

  • Vimal

    Hi Claudia… We are facing problem with imac magic mouse while scrolling. Slide is changed after six time scroll because of scrollThreshold set to 6. We need different value of scrollThreshold for magic mouse and other mouse. We have EXTENDED LICENSE presentation slideshow.

  • Deent

    The slid show using apps leads for the best presentation. The slid show helps other for the detail understanding. It’s easier for the instructor also to make proper presentation in style and well manner.

  • Zbeah Hazara

    nise work exactly