Glider Demo

Here is a simple demonstration of the glider:

Previous

This is Section 1

Hello there! My name is Terry and I love making tutorials. I hope you find this tutorial useful! The basic XHTML and CSS styling for this glider is the same as what you are seeing in the tutorial, except that I've added colours and slightly styled the navigation menu for easier viewing.

Now try playing around with the controls to check if everything is working well ;)

Here's the obligatory Lorem Ipsum text:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is Section 2

You can embed YouTube videos in here as well! The video is one of my favourite kinetic typography video on YouTube:

However, flash movies only work when their wmode is set to transparent. Or else, it will show!

This is Section 3

I love photography as well! I recently ventured into infrared phtography, and it's one of the best experiences around!

This is Section 4

Why is 13 such an unlucky number?

It is believed that the fear for the number 13 stems from primitive man being unable to count past 12. Numbers beyond 12 do now have an individual and independent name but are a combination of the first 12 numbers. With 12 being the end of the line, 13 was moving into unknown territory.

In Norse mythology the 13th number led to the death of Baldur, the beloved of the gods. When the 12 gods gathered for a banquet in Valhalla, Loki gatecrashed the party, increasing the number to 13, which led to the death of Baldur. It also happens that in Tarot cards, 13 is called "Death."

This is Section 5

You are at the last section. Nothing much to see here... but try clicking next button on the right and see what happens.

Next

• Section 1
• Section 2
• Section 3
• Section 4
• Section 5

Other Usage

Placing links to direct movement of sliders on other parts of the page

What if, let's say, you want to cause the content in the slider to move by posting a hyperlink on the other places on the same page? At the first look, it seems to be impossible because the so called "control links" have to be placed between the <div class="controls">...</div> tags. There is a workaround (or to be exact, an additional feature) where it is possible.

Head over to the glider.js file, and between the different functions, add this new function:

goTo: function(index) {
  this.moveTo(this.sections[index], this.scroller, {duration: this.options.duration}); 
},

If you're not clear how and where to add this line, check the modified glider.js file.

Now open your HTML document, and add the following line:

<a title="Go to Section 1" href="#" onclick="my_glider.goTo('0'); return false;">Section 1</a>

Do note that the way the numbering system in Javascript works, the number in my_glider.goTo('0') is always one less than the section number. Javascript starts from 0, while our counting system starts from 1. So, if you want to direct a link to the fourth section, you should use my_glider.goTo('3') and NOT my_glider.goTo('4').

The example of such navigation is seen in the orange navigation bar. Of course, you can also post individual links like this - Click me for Section 3. Check the slider now :)

Hover to navigate between slides

This feature is requested by a user. A slight modification to the line you insert into your HTML in the instructions above will suffice - replace the 'onclick' event with 'onmouseover':

<a title="Go to Section 1" href="#" onmouseover="my_glider.goTo('0'); return false;">Section 1</a>

The example of such navigation is seen in the red navigation bar. Of course, you can also post individual links like this - Hover me for Section 5. Check the slider now :)

Automated gliding

You can also make the glider to automatically glide to the next section by changing the line of javascript you've inserted after the glider container (as instructed in the tutorial) from

<script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration: 0.5});</script>

to:

<script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {autoGlide: true, frequency: 5, duration: 0.5});</script>

The frequency refers to the amount of time each section is displayed - in the code above, we've specified 5 seconds. You can always change this value.

Pausing the glider

You might want to pause it if a visitor hovers his cursor over the glider container, so you will modify:

<div id="glider">

to:

<div id="glider" onmouseover="my_glider.stop();return false;">

What? I still don't get it

It's perfectly fine that you don't understand a single thing written on this page. You can always contact me for details! You can also request for other CSS tutorials, I will post them as soon as I have time.

This page is XHTML and CSS Valid | This page is loaded within 0.58seconds.