j-Carousel2

Es un componente de carrusel simple optimizado para computadoras de escritorio y dispositivos móviles. Cada elemento debe estar incluido en el elemento <figure> (consulte el ejemplo).

Configuración:

• selector {String} un selector para elemento de celda (predeterminado: figure)
• margin {Number} margen izquierdo entre elementos (predeterminado: 10)
• animate {Number} tiempo de espera de animación, 0 deshabilita la animación (predeterminado: 5000)
• delay {Number} Un retraso entre animaciones (predeterminado: 2000)
• parent {String} opcional, selector para obtención de altura.
• marginheight {Number} opcional, un margen para height (predeterminado: 0)
• scrolldivider {Number} opcional, si no se declara count entonces el ancho del elemento se dividirá según este valor y el valor se utilizará para scrollLeft (predeterminado: 3)
• offsetwidth {Number} opcional, aumenta el ancho del contenido (predeterminado: 0)
• duration {Number} opcional, duración de la animación entre elementos que se desplazan (predeterminado: 300)
• durationsnap {Number} opcional, duración de la animación instantánea (predeterminado: 200)
• count {Number} recuento de elementos visibles (predeterminado: 1)
• NUEVO: countxs {Number} opcional
• NUEVO: countsm {Number} opcional
• NUEVO: countmd {Number} opcional
• NUEVO: countlg {Number} opcional

Métodos:

• component.move('next|right/prev|left') desplaza el contenido hacia la derecha o hacia la izquierda
• component.focus('data-id value') se desplaza a la figura específica con el atributo data-id

Es bueno saberlo:

Si se cambia la ruta del componente, el componente resume todas las celdas nuevamente.

Úselo con <ui-component name="carousel2">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

<style>
	.bg { background-color: #F0F0F0; padding: 15px; border-radius: 15px; }
</style>

<ui-component name="carousel2" config="count:3;margin:10" class="invisible">
	<figure>
		<div class="bg">
			<h2>Title 1</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 2</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 3</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 4</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 5</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 6</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 7</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
</ui-component>