j-Carousel2

Is a simple carousel component optimized for desktop computers and mobile devices. Each elemet must be wrapped into the <figure> element (look to example).

Configuration:

• selector {String} a selector for cell element (default: figure)
• margin {Number} left margin between items (default: 10)
• animate {Number} animation timeout, 0 disables animation (default: 5000)
• delay {Number} A delay between animation (default: 2000)
• parent {String} optional, a selector for obtaining of height
• marginheight {Number} optional, a margin for height (default: 0)
• scrolldivider {Number} optional, if the count isn't declared then the element width will be divided according to this value, and the value will be used for scrollLeft (default: 3)
• offsetwidth {Number} optional, increases the content width (default: 0)
• duration {Number} optional, animation duration between scrolling items (default: 300)
• durationsnap {Number} optional, duration for snap animation (default: 200)
• count {Number} count of visible items (default: 1)
• NEW: countxs {Number} optional
• NEW: countsm {Number} optional
• NEW: countmd {Number} optional
• NEW: countlg {Number} optional

Methods:

• component.move('next|right/prev|left') scrolls the content right or left
• component.focus('data-id value') scrolls to the specific figure with data-id attribute

Good to know:

If the component's path is changed then the component summarizes all cells again.

Use it with <ui-component name="carousel2">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

<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>