j-Carousel2

É um componente carousel simples, otimizado para computadores de escritório e dispositivos móveis. Cada elemento deve ser incorporado no elemento <figure> (ver exemplo).

Configuração:

• selector {String} um seletor para o elemento celular (default: figure)
• margin {Number} margem entre itens (default: 10)
• Tempo de animação animate {Number}, 0 desabilita a animação (default: 5000)
• delay {Number} A atraso entre a animação (default: 2000)
• parent {String} opcional, um seletor para obter altura
• marginheight {Number} opcional, uma margem para height (default: 0)
• scrolldivider {Number} opcional, se o count não for declarado, então a largura do element será dividida de acordo com esse valor, e o valor será usado para scrollLeft (default: 3)
• offsetwidth {Number} opcional, aumenta a largura de conteúdo (default: 0)
• duration {Number} opcional, duração de animação entre itens de rolamento (default: 300)
• durationsnap {Number} opcional, duração para a animação instantânea (default: 200)
• count {Number} Número de itens visíveis (default: 1)
• NEW: countxs {Number} opcional
• NEW: countsm {Number} opcional
• NEW: countmd {Number} opcional
• NEW: countlg {Number} opcional

Métodos:

• component.move('next|right/prev|left') escorre o conteúdo para a direita ou para a esquerda
• component.focus('data-id value') é a figura específica com o atributo data-id.

Bom para saber:

Se o caminho do componente for alterado, então o componente resume todas as células novamente.

Use-o com <ui-component name="carousel2">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>