Tiny Circleslider: ¿Quién dijo que los controles deslizantes son aburridos?
Los controles deslizantes de imagen o, más en general, de contenido son tan populares como pueden ser. Hay un montón de ellos en el mercado. El diseño y la funcionalidad se asemejan, la elección de un control deslizante es más o menos una cuestión de gusto. Sin embargo, Tiny Circleslider es diferente. Esta herramienta le permite colocar elementos de contenido en un círculo. Esto lo convierte en una apariencia futurista.
Pequeño deslizador circular: un ejemplo
Cómo convertir una lista en un control deslizante circular
Deslizador circular diminuto es un complemento para jQuery e impresiona con su idea inusual. Hablando HTML, tenemos una lista desordenada simple, algunos divs para la navegación y elementos de diseño adicionales:
<div id="circleslider">
<div class="viewport">
<ul class="overview">
<li><a rel="group" href="https://www.noupe.com/development/bild1.jpg"><img src="https://www.noupe.com/development/bild1.jpg" /></a></li>
<li><a rel="group" href="https://www.noupe.com/development/bild1.jpg"><img src="https://www.noupe.com/development/bild1.jpg" /></a></li>
…
</ul>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
El contenedor con la clase. viewport
se utiliza para asegurarse de que siempre haya solo uno de los elementos de contenido visible. La lista que lleva la clase. overview
define los elementos de contenido. Se utiliza una matriz adicional de tres contenedores para diseñar los elementos necesarios para la apariencia del control deslizante. Cada elemento de la lista en el overview
-la lista está representada por un punto, definido mediante – bueno – dot
tiempo overlay
tiene que llevar una imagen de fondo que a su vez tiene que incluir un círculo transparente. Este círculo se usa luego para enmascarar el contenido. El resultado es lo que le da a Circleslider su nombre, lo adivinas, un círculo. La clase thumb
define el elemento, que será arrastrable alrededor del círculo. Esta es la forma en que funciona la navegación en Tiny Circleslider. Es esencial mantener estos nombres de clase tal como se mencionan en la parte de JavaScript del complemento. Puede ganar individualidad mediante el uso de imágenes de fondo personalizadas.
Circleslider en acción
Después de que todo esté marcado y diseñado, tendrás que ponerle la lógica. Llame a jQuery y al complemento en el encabezado de su documento. Ahora puede transferir la ID del área HTML en la que se activará el control deslizante:
<script type="text/javascript">
$(document).ready(function(){
$("#circleslider").tinycircleslider({
interval: true,
radius: 200
});
});
</script>
Hay una vista de opciones, puede personalizar aún más. Usando interval
cuidaría un deslizamiento automático a través de los elementos, mientras que el uso radius
es necesario para las matemáticas detrás del complemento.
Conclusión: Deslizador circular diminuto es simple de incrustar e igualmente simple de personalizar. La navegación inusual no encajará en todos los sitios web, pero donde lo hace, tiene un efecto extraordinario. El complemento funciona bien tanto en Android como en iOS.
(dpe)
#Tiny #Circleslider #Quién #dijo #los #controles #deslizantes #son #aburridos