# j-Carousel2

> Това е проста карусел компонент, оптимизиран за настолни компютри и мобилни устройства. всеки елемент трябва да бъде вграден в елемента <фигура> (виж пример).

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: bg
Content-SHA256: 5ad7518769e1b50a7f46510d907e6d537a2115e5d8293313885e3509510023f7
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Това е проста карусел компонент, оптимизиран за настолни компютри и мобилни устройства. всеки елемент трябва да бъде вграден в елемента `<figure>` (виж пример).


__Конфигуриране__:

- `selector {String}` селектор за клетъчен елемент (предварително: `figure`)
- `margin {Number}` е маржът между елементите (предварително: `10`)
- `animate {Number}` Анимация на времето, `0` Анимация за дефекти (дефолт: `5000`)
- `delay {Number}` Закъснение между анимацията (дефинирано: `2000`)
- `parent {String}` опция, селектор за получаване на височина
- `marginheight {Number}` опционален, марж за `height` (дефолт: `0`)
- `scrolldivider {Number}` опционално, ако `count` не е деклариран, тогава __element ширина__ ще бъде разделена според тази стойност, а стойността ще се използва за `scrollLeft` (предварително: `3`)
- `offsetwidth {Number}` опционално, увеличава ширината на съдържанието (дефолт: `0`)
- `duration {Number}` опция, анимационна продължителност между елементи за преминаване (дефолт: `300`)
- `durationsnap {Number}` опционално, продължителност за анимация (предварително: `200`)
- `count {Number}` Брой видими елементи (дефолт: `1`)
- НОВА: `countxs {Number}` опционално
- НОВА: `countsm {Number}` опционално
- НОВА: `countmd {Number}` опционално
- НОВА: `countlg {Number}` опционално

__Методи__:

- `component.move('next|right/prev|left')` преминава съдържанието отдясно или отляво
- `component.focus('data-id value')` Връщане към конкретната фигура с `data-id` атрибути

__Добре е да се знае__:

Ако съставът се променя, тогава компонентът обобщава всички клетки отново.

Използвайте го с `<ui-component name="carousel2">`Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в `DEF.fallback` (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на MIT.

```html example.html
<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>
```