Content Slider With Zurb Foundation in PHP

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


Similar Articles