BaseCarousel

Component to render a image slider, based on the JS Library Swiper

Props

Prop name	Description	Type	Values	Default
items	items to display array of objects with the following required properties: title ?string - the title to display. subtext ?string - the text below the title. description ?string - the type of item. additional ?string - additional information (e.g. dates). href string - an url to follow upon item click - this is required if item should be rendered as a link element. previews Object[]- an array of image urls in different sizes in the following form: e.g. [{ '460w': 'image-url' }, { '640w': 'image url' },...]	array	-	[]
swiperOptions	By default, slides are grouped with a maximum of three elements per view, depending on screen resolution. If there are fewer than three elements, the single element takes up 50% of the space; otherwise, it takes up 33%. The default configuration with all settings can be found in the sample file code BaseCarousel. Otherwise, you can freely set all swiper API options.	object	-	{}
renderLinkElementAs	specify how a link element should be rendered this needs to be a valid vue link component string (e.g. 'RouterLink') or a component directly and vue-router is necessary caveat: if you are using Nuxt the string 'NuxtLink' is not enough, but you need to import the component as import { NuxtLink } from '#components'; and pass the component to the prop!	string|object	-	'RouterLink'
assistiveText	this prop gives the option to add assistive text for screen readers. properties: gotoSlide: describing a single pagination bullet nextSlide: describing the next button prevSlide: describing the previous button roleDescription: describing the role of outer swiper container slide: describing a single slide	object	-	{ gotoSlide: 'Go to slide', nextSlide: 'Next slide', prevSlide: 'Previous slide', roleDescription: 'Carousel element with {total} items', slide: 'Slide' }

Events

Event name	Properties	Description
initialized	undefined boolean - was carousel initialized	event triggered when slider is initialized
clicked	undefined Object - the carousel item that was clicked	event triggered by a ClickEvent on one of the carousel boxes

---

Demo

Note: In base Angewandte projects, slides are grouped with a maximum of three elements per view, depending on screen resolution. If there are fewer than three elements, the single element takes up 50% of the space; otherwise, it takes up 33%.
The default configuration with all settings can be found in the sample file code below.