Introduction
In this article I will explain Content Slider from the Zurb Foundation. Orbit is a JavaScript Image and Content Slider from the Zurb Foundation. The Zurb Foundation file is basically used for website design and this is very simple. You can easily create button, form and contents sliders. To create a content slider two files are required, foundation.js and foundation.css.
The following table shows the various option values for using the content slider.
| Option | Value | Description |
| Fluid | true | or set a aspect ratio for content slides. |
| AnimationSpeed | 800 | Determines the speed of the animation. |
| Animation | fade | for use fade, horizontal-slide, vertical-slide, horizontal-push. |
| CaptionAnimation | fade | for use fade, slideOpen, none. |
Example
How to do that using the Zurb Foundation with HTML. When you use a content slider then you must provide a div slider with a unique id.
<div id="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
This is your jQuery function for using the content slider with the Zurb Foundation file.
<script type="text/javascript">
$(window).load(function () {
$('#slider').orbit({ fluid: '5x5' });
});
</script>
This your full script of the content slider with the Zurb Foundation.
<html>
<head>
<title>Orbit content slider Example, created with Foundation 3</title>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
</head>
<body>
<div class="row">
<div class="six columns">
<div id="slider">
<div>
<h2>PHP Article</h2>
<p>Basic PHP article and some advance for reading please click on PHP article.</p>
Join the conversation! Your thoughts help the community grow.