Foundation CSS es el marco frontend de CSS que se utiliza para crear sitios web, aplicaciones y correos electrónicos receptivos que funcionan perfectamente en cualquier dispositivo. Está escrito usando HTML, CSS y Javascript y es utilizado por muchas compañías famosas como Amazon, Facebook, eBay, etc. Utiliza paquetes como Grunt y Lib sass para una codificación y control rápidos y un compilador SaaS para acelerar el desarrollo. Foundation CSS Orbit se usa para crear el control deslizante que puede deslizar los elementos usando la clase de órbita. Podemos almacenar cualquier tipo de contenido en el control deslizante, como texto, imágenes, etc. En este artículo, analizaremos los contenidos de diapositivas de Foundation CSS Orbit .
Contenido de la diapositiva Foundation CSS Orbit Clase:
- orbit-slide: esta clase se usa para crear el control deslizante para deslizar el contenido.
Sintaxis:
<li class="orbit-slide"> .... </li>
Ejemplo 1: Este ejemplo describe el contenido de la diapositiva de órbita de CSS de Foundation.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title> Foundation CSS Orbit Slide Contents </title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</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>
Producción:
Ejemplo 2: Este ejemplo describe el contenido de la diapositiva Foundation CSS Orbit con imágenes .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title> Foundation CSS Orbit Slide Contents </title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<strong>
Foundation CSS Orbit Slide Contents
</strong>
<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>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" >
</div>
</li>
<li class="orbit-slide">
<div>
<h3 class="text-center"> GeeksforGeeks 2 </h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" >
</div>
</li>
<li class="orbit-slide">
<div>
<h3 class="text-center"> GeeksforGeeks 3 </h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png" >
</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>
</center>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/orbit.html#slide-contents
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA