w3resource logo


Responsive Image and Content Slider with Orbit

Create Responsive Image and Content Slider with Orbit

Secondary Nav

Description

Orbit is a JavaScript Image and Content Slider from Zurb Foundation 3, to create image and content slider easily. This tutorial unfolds the nuances of using Orbit.

How to use it

Inclusion of files

There are two files which are required to be included to make Orbit work. These two files are: foundation.js (or a minified version of it) and foundation.css.

The HTML

And then you may set the HTML required. Here is an example of how you may do it:

<div id="slider">
  <img src="orbit-demo1.jpg" />
 <img src="orbit-demo2.jpg" />
 <img src="orbit-demo3.jpg" />
</div>
            

You must provide the div containing the slider with a unique id, like in this example, id is 'slider'. And then you add images of to be rendered.

The JavaScript

You need JavaScript to activate Orbit. And here is how you may do that:

<script type="text/javascript">
   $(window).load(function() {
       $('#slider').orbit();
   });
</script>
            

So, using Jquery syntax, you add 'orbit()' to the selector identified by id of the associated container div. And that's it. But this is ofcourse an out of the box usage. You may grace the slider with lots of features, which you will see soon.

You may view an online demo.

Code

<html>
<head>
  <title>Orbit Example, created with Foundation 3</title>
  <link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
</head>
<body>
<div class="row">
  <div class="six columns">
	<div id="slider">
	<img src="h1-style.png" alt="h1 style using Foundation 3" />
	<img src="h2-style.png" alt="h2 style using Foundation 3"  />
	<img src="h3-style.png" alt="h3 style using Foundation 3"  />
	<img src="h4-style.png" alt="h4 style using Foundation 3"  />
	</div>
</div>
</div>
<script src="/zurb-foundation3/foundation3/javascripts/jquery.min.js"></script>
<script src="/zurb-foundation3/foundation3/javascripts/foundation.min.js"></script>
<script type="text/javascript">
   $(window).load(function() {
       $('#slider').orbit();
   });
</script>
</body>
            

With Orbit, you may also create content sliders. Here is an example:

<html>
<head>
  <title>Orbit content slider Example, created with Foundation 3</title>
  <link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
</head>
<body>
<div class="row">
  <div class="six columns">
	<div id="content-slider">
	<div>
    <h2>Learn PHP</h2>
    <p>In this series of tutorials we have covered PHP 5 in detail. While creating this, we have take care that learners can master the basics of PHP and can be prepared to develop web based applications.</p>
	<p><a href="http://www.w3resource.com/php/php-home.php" class="button" target="_blank">w3resource PHP Tutorial</a>
  </div>
  <div>
    <h4>Learn MySQL</h4>
    <p>After reading this largest third party online MySQL tutorial by w3resource, you will be able to install, manage and develop PHP-MySQL web applications by your own.</p>
    <p><a href="http://www.w3resource.com/mysql/mysql-tutorials.php" class="button" target="_blank">w3resource MySQL Tutorial</a>
  </div>
  <div>
    <h4>Learn JavaScript</h4>
    <p>In this series of tutorials we have covered JavaScript 1.5+ in detail. While creating this, we have taken care that learners can master the basics of JavaScript.</p>
	<p><a href="http://www.w3resource.com/javascript/javascript.php" class="button" target="_blank">w3resource JavaScript Tutorial</a>
  </div>
	</div>
</div>
</div>
<script src="/zurb-foundation3/foundation3/javascripts/jquery.min.js"></script>
<script src="/zurb-foundation3/foundation3/javascripts/foundation.min.js"></script>
<script type="text/javascript"> 
   $(window).load(function() {
       $('#content-slider').orbit({ fluid: '2x1' });
   });
</script>
</body>
            

Here is the online demo.

Note that, while creating a content slider, you must specify an aspect ratio along with orbit(), in the form of {fluid: XxY}.

You may find that, while loading, images or content are stacked, one coming over another. To get rid of this, you may use the following CSS. It loads with a background and a spinner initially, once the images are loaded, the background is turned off.

#slider { background: url(spinner.gif) center center #f4f4f4; height: 300px; }
#slider img { display: none; }

#slider.orbit { background: none; }
#slider.orbit img { display: block; }
            

Options you may use with Orbit

Using the options:

$('#slider').orbit({
option1: value,
option2: value,
.......
....
optionn: value
});
            

And the following table shows various options

Option Value (if numeric, then you may change) Description
animation 'fade' fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed 800 Determines the speed of the animation
timer true Times works if set true
resetTimerOnClick false If true, it resets the timer instead of pausing
advanceSpeed 4000 If timer is set, the time between transitions
pauseOnHover false If set true, the transition is paused on hover
startClockOnMouseOut false If set true, the clock starts on mouse out
startClockOnMouseOutAfter 1000 how long after MouseOut should the timer start again
directionalNav true manual advancing directional navs
captions true If you want captions
captionAnimation 'fade' fade, slideOpen, none
captionAnimationSpeed 800 Speed of the caption animation
bullets false To activate or deactivate the bullet navigation
bulletThumbs false thumbnails for the bullets
bulletThumbLocation '' location of the bullet thumbnails
afterSlideChange function(){} empty function
fluid true or set an aspect ratio for content slides


Join our Question Answer community to learn and share your programming knowledge.