Base UI

Carousel
Swiper with thumbnail Combines a swiper/slider functionality with thumbnail navigation, allowing users to easily navigate through a collection of images or content
Swiper without thumbnail More focusing on the captivating visuals or information without distractions of other image or content.
Documentation
Available Parameters
Parameter Type Description
baseId Unique Text
required 		Set Unique Base ID for Carousel component.
withThumbnail Boolean
Default : false 		Set true to display thumbnails.
withArrows Boolean
Default : false 		Set true to display arrow navigation.
withBackdrop Boolean
Default : false 		Set true to display carousel backdrop.
items Array of Text Filename Set list of carousel images.
The Value is name of image file in the src/assets/images/ folder.
Starter Kit Codes
Starter Kit Code 
 {# include components/carousel  #}
 {% include "../../components/carousel.twig", with {
    	'baseId'		: 'example-carousel-1',

	'withThumbnail'	: true,
	'withArrows'	: false,

	'items'		: [
		'carousel-image-1.png',
		'carousel-image-2.png',
		'carousel-image-3.png',
		'carousel-image-4.png',
		'carousel-image-5.png',
		'carousel-image-6.png',
	]
 } %}
Starter Kit Code 
 {# include components/carousel  #}
 {% include "../../components/carousel.twig", with {
    	'baseId'		: 'example-carousel-2',

	'withThumbnail'	: false,
	'withArrows'	: true,

	'items'		: [
		'carousel-image-0.png',
		'carousel-image-1.png',
		'carousel-image-2.png',
		'carousel-image-3.png',
		'carousel-image-4.png',
		'carousel-image-5.png',
		'carousel-image-6.png',
	]
 } %}
Starter Kit Code 
 {# include components/carousel  #}
 {% include "../../components/carousel.twig", with {
    	'baseId'		: 'example-carousel-3',

	'withThumbnail'	: false,
	'withArrows'	: true,
	'withBackdrop'	: true,

	'items'		: [
		'carousel-image-0.png',
		'carousel-image-1.png',
		'carousel-image-2.png',
		'carousel-image-3.png',
		'carousel-image-4.png',
		'carousel-image-5.png',
		'carousel-image-6.png',
	]
 } %}