FF1+ IE8+ Opera 9+

DD Full Screen Slider

Author: Dynamic Drive

Description: This full screen Slider creates slides that cover the entire page, allowing you to present content in an interactive, digestible format to viewers.  Desktop and mobile friendly, the slides can be navigated in a plethora of ways- auto generated navigational buttons, keyboard, mousewheel, and drag/swipe on the desktop and on mobile. The following lists the main features of this versatile script:

  • Numerous ways to navigate the Slider for maximum accessibility: Clicking on the auto generated navigation links, drag/swipe on desktop and mobile devices,  mousewheel and keyboard navigation.

  • Each slide adds an unique hash (#) to the window URL to make them navigable and sharable with distinct URLs.

  • Ability to enable mouse dragging on desktop browsers for navigation of slides. Turn this feature off if content contains text you wish users to be able to select via the mouse.

  • Ability to enable "scrollable" DIVs inside a slide that do not partake in the scrolling of the slide itself when swiped, so the content in question can be scrolled instead.

  • CSS3 powered animations, falling back to jQuery for older browsers.

  • Wide browser support, including IE8 (partial) and IE9.

The Slider is meant to assume an entire page so it is the only element on it.

Demo: Click here to see Slider again


Directions:

Step 1: Save the following page (right click, and select "Save As"), which contains the entire markup of DD Full Screen Slider. Then, download the following support files (by default, to the same directory as your page itself):

That's it for installation! Lets continue on to see how to customize the script.

- Defining page elements

The markup of Full Screen Slider consists of a main <SECTION> element that's fixed in position to cover up the entire screen. Inside it is a ".slidewrapper" wrapper DIV that in turn contains a series of <ARTICLE> elements, or your individual page elements:

<section id="ddfss" class="dd_fullscreenslider">

<!-- Keep all your ARTICLE elements inside the "slidewrapper" DIV -->
<div class="slidewrapper">

<article class="slide" data-title="Introduction">
Content for slide 1
</article>

<article class="slide" data-title="Page 2">
Content for slide 2
</article>

</div>

<!-- optional close button inside Slider -->
<div class="closex" onClick="http://www.dynamicdrive.com/dynamicindex17/ddfullscreensliderdoc.htm">Close</div>

</section>

For each page element, define it as an <ARTICLE> element and add it inside the ".slidewrapper" wrapper DIV. The optional "data-title" attribute if defined creates a custom "title" that's shown when the user mouses over the corresponding pagination link for that page.

- Initializing/ customizing the Slider

To initialize the slider, call the constructor function ddfullscreenslider() in the HEAD section of your page:

<script>

var fss // register arbitrary global variable

jQuery(function(){
 fss = new ddfullscreenslider({
  sliderid: 'ddfss' // id of main slider container
 })
})

</script>

Enter at a minimum the "sliderid" option, pointing to the ID of the Slider's main <SECTION> container. If multiple options are defined, separate each one with a comma (,). The following lists all of ddfullscreenslider() supported options:

Option Description
sliderid: 'string'

Required

The ID of the slider's outermost SECTION element.
addHash: Boolean

defaults to true

Boolean on whether each slide should trigger a change to the URL's hash portion when shown, making the slides navigable and sharable with distinct URLs.
transitionDuration: 'seconds'

defaults to '0.5s'

A string value denoting the duration of the slide transition in seconds, suffixed with the letter "s" at the end. A value of "1s" of example indicates 1 second.
keycodeNavigation: [downcode, upcode]

defaults to [40, 38]

The keycodes for the desired keys on the keyboard that should trigger the Slider to slide down and up one slide, respectively. By default, the values entered correspond to the keyboard's "down" and "up" arrow keys.

To find the keycode for the desired key, you can use the interactive keycode finder under the documentation for the keyCode property here.

swipeconfig: {peakamount: int, mousedrag: Boolean}

defaults to {peekamount: 100, mousedrag: true}

Configures two aspects of the swipe/drag engine used to go to another slide:
  • peakamount: An integer indicating the distance in pixels the user is able to drag from the current slide before it triggers a navigation to the next or previous slide.
  • mousedrag: A Boolean indicating whether to enable navigation by dragging the mouse on non touch friendly devices such as a PC.  Note: By enabling this option, text selection and copying using the mouse inside the slides becomes impossible, as the mouse is re-delegated to scroll the slide instead. You should only enable this feature if your slides contain only images or textual content in which you believe the disability of text selection is inconsequential.

The following initialization code disables mouse dragging to navigate the Slider:

<script>

var fss // register arbitrary global variable

jQuery(function(){
 fss = new ddfullscreenslider({
  sliderid: 'ddfss', // id of main slider container
  swipeconfig: {peakamount:100, mousedrag:false}
 })
})

</script>

onslide: function(){$slide, index}

defaults to function(){}

An event handler that's fired each time a slide is shown, including when the Slider first loads on the page. The two parameters provide more details on the current slide (<ARTICLE> element) shown:
  • $slide: jQuery object referencing the current slide, or <ARTICLE> element, being shown.
  • index: The index of the current slide relative to its peers, where a value of 0=1st slide, 1=2nd etc.

- Optimizing content inside your slides to accommodate all devices and screen sizes

When using Full Screen Slider to display content, it's important to focus on content accessibility across different devices with their differing screen sizes. This is because each slide within the Slider, while spanning the entire screen, cuts off any content that overflows that space. On a desktop, the entire screen is a large area to work with, though on a mobile phone, it's suddenly the inverse.

Making sure the content inside each slide is viewable across devices is an exercise in responsive design. One of the most important arsenals is CSS media queries, by shrinking or hiding unnecessary content as the screen size gets smaller. For example, the following CSS hides all images inside your Slider when the user's screen device height is below 700px:

@media (max-height: 700px){
 section.dd_fullscreenslider article.slide img{
  display: none;
 }
}

This frees up more vertical space inside each slide to ensure the remaining textual content doesn't get cut off prematurely on a small device. This is just a very simple example of using media queries for this purpose.

Making select content inside a slide "scrollable"

Another tool to optimizing content for smaller devices is by making long content "scrollable" inside a slide. This is illustrated in the 1st and 3rd (Coconuts) slides within the demo. (Note: The 1st slide's content is only scrollable on small screen devices.) To make a content scrollable, begin by adding the class "scrollable" to that specific content:

<article class="slide" data-title="Introduction">

<p id="intro" class="scrollable">Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content.</p>

</article>

Here I've added the required class to a P element with lots of textual content. This prepares the paragraph to become scrollable, and is necessary as by default the action of swiping anywhere inside the Slider triggers it to change slides, and not scroll an overflowing content. In other words, the original behaviour of swiping is disabled inside the Slider. By adding a class of "scrollable" to an element, it causes the script to scrutinize the element in more detail to decide whether to return the original swipe behaviour of scrolling inside it back to the element whenever the finger/mouse is on it.

Just by adding a class of "scrollable" to an element doesn't automatically make it scrollable. The next step is to limit the element container's height so content inside it "overflows" and a vertical scrollbar is added by the browser to scroll the content inside. This can be done in two ways: explicitly giving the element a CSS height property, or dynamically using CSS media queries instead. The first route is also the more straightforward one:

Giving a "scrollable" element a CSS height property to make it always scrollable:

<article class="slide" data-title="Introduction">

<p id="intro" class="scrollable" style="height:200px">Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content.</p>

</article>

The disadvantage of this approach is its rigidness- regardless of the screen size, the element's height above will stay fixed at 200px, requiring the user to scroll to view the contained content. On larger screens where there is enough space to accommodate the element's content in full without scrolling, this appears unsightly and inelegant. This brings us to the second approach...

Conditionally giving a "scrollable" element a CSS height property using CSS media queries

The second, more adaptive approach is to only give a "scrollable" element an explicit height when necessary to make its content inside scrollable, using CSS media queries. With some careful forethought it will mean your scrollable content will appear normal without scrollbars on sufficiently large screens, and only turn shorter in height and scrollable on small screen devices. To do this, firstly, for the markup, we remove any explicit CSS height attribute from it:

<article class="slide" data-title="Introduction">

<p id="intro" class="scrollable">Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content. Long piece of content.</p>

</article>

From here we'll define a CSS media query (or multiple if needed) targeting this element to conditionally assign it an explicit height. The idea is to only do so when the screen is too small to display the content in full. The following CSS media query for example does this when the user's screen is 700px or less tall:

@media (max-height: 700px){
 #intro{
  height: 200px;
 }
}

Whether you're going with the first or second route for making a content scrollable inside the Slider , what happens behinds the scene is the following: Whenever the finger/mouse is over an element with a CSS class of "scrollable", the script pauses to check whether the element's container height is smaller than the content's height inside it. If it is, this implies the element should be scrollable, and the script then proceeds to relinquish swipe behaviour back to the element itself, instead of moving the slide up or down as usual.

Content accessibility inside the Slider is an important issue that requires planning and lots of fine tuning to achieve. Using CSS media queries and the principles of responsive design is central to realizing this.

- Customizing the hash (#) value associated with each slide

With the addHash option inside  function ddfullscreenslider() set to true, the Slider associates a unique hash value with each slide and adds it to the window's URL when the slide is shown. By default the values are automatically generated, specifically: "#slide1", "#slide2" and so on. If you wish to customize the hash value to produce a more descriptive URL for each slide, this is done simply by defining an ID attribute inside a slide's <ARTICLE> element like so:

<article id="introduction_to_slider" class="slide" data-title="Introduction">
Content for slide 1
</article>

<article id="all_about_mushrooms" class="slide" data-title="Page 2">
Content for slide 2
</article>

With an ID attribute defined, the script will use the ID value as the hash value associated with that slide instead.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post