<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green"
>GeeksforGeeks</
h1
>
<
h3
>Foundation CSS Orbit Using Animation</
h3
>
</
center
>
<
div
class
=
"row float-center"
style
=
"width: 38rem;"
>
<
div
class
=
"columns"
>
<
div
class
=
"orbit"
role
=
"region"
aria-label
=
""
data-orbit data-options="animInFromLeft:fade-in;
animInFromRight:fade-in; animOutToLeft:fade-out;
animOutToRight:fade-out;">
<
ul
class
=
"orbit-container"
>
<
button
class
=
"orbit-previous"
aria-label
=
"previous"
>
<
span
class
=
"show-for-sr"
>Previous Slide</
span
>◀</
button
>
<
button
class
=
"orbit-next"
aria-label
=
"next"
><
span
class
=
"show-for-sr"
>Next Slide</
span
>▶</
button
>
<
li
class
=
"is-active orbit-slide"
>
<
img
class
=
"orbit-image"
src
=
"1.png"
alt
=
""
>
<
figcaption
class
=
"orbit-caption"
>First Slide</
figcaption
>
</
li
>
<
li
class
=
"orbit-slide"
>
<
img
class
=
"orbit-image"
src
=
"2.png"
alt
=
""
>
<
figcaption
class
=
"orbit-caption"
>second slide</
figcaption
>
</
li
>
<
li
class
=
"orbit-slide"
>
<
img
class
=
"orbit-image"
src
=
"3.png"
alt
=
""
>
<
figcaption
class
=
"orbit-caption"
>Third Slide</
figcaption
>
</
li
>
</
ul
>
<
nav
class
=
"orbit-bullets"
>
<
button
class
=
"is-active"
data-slide
=
"0"
><
span
class
=
"show-for-sr"
>First slide details.</
span
>
<
span
class
=
"show-for-sr"
>Current Slide</
span
></
button
>
<
button
data-slide
=
"1"
><
span
class
=
"show-for-sr"
>
Second slide details.</
span
></
button
>
<
button
data-slide
=
"2"
><
span
class
=
"show-for-sr"
>
Third slide details.</
span
></
button
>
</
nav
>
</
div
>
</
div
>
</
div
>
<
script
>
$(document).ready(function () {
$(document).foundation();
});
</
script
>
</
body
>
</
html
>