<!DOCTYPE html>
<html lang="en">
<head>
<title> Foundation CSS Orbit Slide Contents </title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<strong>
Foundation CSS Orbit Slide Contents
</strong>
</center>
<div class="orbit" role="region" data-orbit data-use-m-u-i="false">
<ul class="orbit-container">
<button class="orbit-previous" aria-label="previous">
<span class="show-for-sr">Previous</span>
◀
</button>
<button class="orbit-next" aria-label="next">
<span class="show-for-sr">Next</span>
▶
</button>
<li class="is-active orbit-slide">
<div>
<h3 class="text-center"> GeeksforGeeks 1 </h3>
<p class="text-center">
A Computer Science portal for geeks.
</p>
</div>
</li>
<li class="orbit-slide">
<div>
<h3 class="text-center"> GeeksforGeeks 2 </h3>
<p class="text-center">
It contains well written, well thought
and well explained computer science and
programming articles.
</p>
</div>
</li>
<li class="orbit-slide">
<div>
<h3 class="text-center"> GeeksforGeeks 3 </h3>
<p class="text-center">
Computer Science portal
</p>
</div>
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0">
<span class="show-for-sr">GeeksforGeeks 1</span>
<span class="show-for-sr">Current Slide</span>
</button>
<button data-slide="1">
<span class="show-for-sr">GeeksforGeeks 2</span>
</button>
<button data-slide="2">
<span class="show-for-sr">GeeksforGeeks 3</span>
</button>
</nav>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>