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>
<p><a href="http://www.c-sharpcorner.com/1/279/" class="button" target="_blank">PHP Article</a>
</div>
<div>
<h4>JQuery Article</h4>
<p>Query is a fast and concise JavaScript Library that simplifies HTML document
traversing, event handling, animating, and Ajax interactions for rapid web development.</p>
<p><a href="http://www.c-sharpcorner.com/1/236/" class="button" target="_blank">JQuery Article</a>
</div>
<div>
<h4>JavaScript And Tyscript</h4>
<p>Welcome to TypeScript section of C# Corner. Here you can learn TypeScript
programming.</p>
<p><a href="http://www.c-sharpcorner.com/1/291/typescript.aspx" class="button" target="_blank">Tyscript</a>
</div>
</div>
</div>
</div>
<script src="foundation/javascripts/jquery.min.js"></script>
<script src="/foundation/javascripts/foundation.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('#slider').orbit({ fluid: '5x5' });
});
</script>
</body>
</html>
Output
Click on the "Next" button to see the next context.
![cal.jpg]()
Click "Next".
![cal1.jpg]()
Click "Next".
![cal2.jpg]()
When you want to see the next content automatically without using the Next button then click on the "Play" button, such as:
![dynamic check.jpg]()