Embla Carousel

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Embla Carousel

Under the app's name, you should explain the topic, giving a brief description of its functionality in a store when installed.

Next, add media (either an image of a GIF) with the rendered components, so that users can better understand how the app works in practice.

Media Placeholder

Configuration

1. Adding the app as a theme dependency using eplus-cli

eplus io add embla-carousel

or do manually and add in the manifest.json file;

{
  "{vendor}.embla-carousel": "0.x"
}

1. Declaring the app's main block in a given theme template or inside another block from the theme.

block name	description
embla-carousel	XXXX
embla-carousel.group	XXXX
embla-carousel.stop-propagation	XXXX

embla-carousel props

Prop name	Type	Description	Default value
options	object	XXXX
blockClass	string	XXXX	[]
slides	element	XXXX

• options object:

Prop name	Type	Description	Default value
dots	boolean	XXXX	``
navigation	boolean	XXXX	``
autoplay	object	XXXX	``
disabledPreventClick	boolean	XXXX	``
breakpoints	EmblaBreakpoints	XXXX	``
slidesPerView	number	XXXX	``
preventClick	boolean	XXXX	``
forceLoop	boolean	XXXX	``
alwaysShowNavigation	boolean	XXXX	``

• autoplay object:

Prop name	Type	Description	Default value
delay	number	XXXX	``
stopOnInteraction	boolean	XXXX	``
playOnInit	boolean	XXXX	``

embla-carousel.group props

Prop name	Type	Description	Default value
startIndex	number	XXXXXXXX	XXXXXX

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
container
viewport
emblaContainer
emblaSlide
emblaInnerSlide
isSelected
containerDots
containerNavigation
containerGroup
viewportGroup
emblaContainerGroup
emblaSlideGroup
emblaInnerSlideGroup
loading
notEnoughSlides
dotButton
dotButtonSelected
prevButton
inactive
nextButton
inactive

Contributors ✨

Thanks goes to these wonderful people:

This project follows the all-contributors specification. Contributions of any kind are welcome!