You can put space between your slides by adding some horizontal padding to each CarouselSlide.
Skin
Full
Using the skin="full" prop on a Carousel will cause the slides to take up the full width of the Carousel rather than leaving space on the sides for the arrow-buttons. The result is that the arrow-buttons sit on top of your slides.
"promo-bar" skin
The "promo-bar" skin is used only for the global messaging component, a carousel of Promo Bars that occurs across the top of most pages.
It should be used with the `fade` option on the Carousel.
ProgressIndicator
Use the progressIndicator option in order to show the user which slide they are currently viewing within the context of the entire Carousel.
Dots
The dots can be inset, so that they overlap the content.
Dots alignment
Using both progressIndicator="dots" and progressIndicatorAlignment="left" will make the dots left-aligned instead of centered.
Dots Inset
Fraction
Setting the progressIndicator prop to a value of "fraction" makes the progress indicator into a fraction that shows the number of the current slide and the total number of slides. For instance, if the user is on slide 2 out of 5, it will show as "2/5".
This type progressIndicator is meant for a specific Carousel setup, and it is not as flexible as the other options. When using progressIndicator="fraction":
slidesToShowis automatically set to1arrowsis automatically set totruedotsis automatically set totrue
Arrows
Use the arrows option in order to show/hide the arrows.
Note: if you hide the arrows, you must show the indicator dots (above), so that the user has a visible way of being able to move between slides. This is an accessibility requirement!
Arrows positioning
By default, the arrows will be vertically centered, using the total height of the Carousel. However, you may want to adjust this; for instance, if the Carousel holds a set of product tiles, it might look better visually if the arrows were vertically centered against the product images instead.
To accomplish this, there are two properties that you can use to change the arrows' vertical positioning:
arrowVerticalPositionsets the arrows' vertical midpoint a certain amount from the top of the Carousel. For instance,arrowVerticalPosition="50px"will vertically center the arrows at a point 50px from the top of the Carousel.arrowVerticalOffsetwill shift the arrows by the specified amount from their default position. For instance,arrowVerticalOffset="-40px"will place the arrows 40px higher than their normal position.
Peek
Use the peek option, in order to have the future/past slides, "peek" out from the edges of the Carousel in order to show that there are more slides.
Note: the peek feature expects that you are using a Carousel with infinite scrolling. Setting the infinite prop to false will break the Carousel if peek is also true. If you need a Carousel that is finite, but also shows a peek of adjacent slides, try setting slidesToShow to a non-integer value such as 1.2.
peek is often paired with progressIndicator="fraction"
You can also create a peek effect by setting the number of slides to show to a value with a decimal place:
Grid Gutters
Use the gridGutters option to place gutters (gaps) between each slide. These gutters will match the width of the gutters on the layout grid, so your slides will appear to be on the grid.
Components
Visage's Carousel is built on top of the react-slick third-party component. See the Slick documentation for full prop descriptions.
Carousel
| Prop | Type | Default | Description |
|---|---|---|---|
| accessibility | boolean | ||
| adaptiveHeight | boolean | ||
| afterChange | (currentSlide: number) => void | ||
| appendDots | (dots: ReactNode) => Element | ||
| arrows | boolean | ||
| asNavFor | Slider | ||
| autoplaySpeed | number | ||
| autoplay | boolean | ||
| beforeChange | (currentSlide: number, nextSlide: number) => void | ||
| centerMode | boolean | ||
| centerPadding | string | ||
| cssEase | string | ||
| customPaging | (index: number) => Element | ||
| dotsClass | string | ||
| dots | boolean | ||
| easing | string | ||
| edgeFriction | number | ||
| fade | boolean | ||
| focusOnSelect | boolean | ||
| infinite | boolean | ||
| initialSlide | number | ||
| lazyLoad | "ondemand" | "progressive" | ||
| nextArrow | Element | ||
| onEdge | (swipeDirection: string) => void | ||
| onInit | () => void | ||
| onLazyLoad | (slidesToLoad: number[]) => void | ||
| onReInit | () => void | ||
| onSwipe | (swipeDirection: string) => void | ||
| pauseOnDotsHover | boolean | ||
| pauseOnFocus | boolean | ||
| pauseOnHover | boolean | ||
| prevArrow | Element | ||
| responsive | ResponsiveObject[] | ||
| rtl | boolean | ||
| slide | string | ||
| slidesPerRow | number | ||
| slidesToScroll | number | ||
| slidesToShow | number | 1 | |
| speed | number | ||
| swipeToSlide | boolean | ||
| swipe | boolean | ||
| swipeEvent | (swipeDirection: string) => void | ||
| touchMove | boolean | ||
| touchThreshold | number | ||
| useCSS | boolean | ||
| useTransform | boolean | ||
| variableWidth | boolean | ||
| vertical | boolean | ||
| verticalSwiping | boolean | ||
| waitForAnimate | boolean | ||
| skin | "standard" | "full" | "promo-bar" | standard | The visual style of the Carousel |
| progressIndicator | "none" | "dots" | "dots-inset" | "fraction" | none | Specifies the way that slide-progress is indicated to the user |
| progressIndicatorAlignment | "left" | "center" | "center" | Specifies the alignment of the progress indicator |
| peek | boolean | Whether to show a peek of the next slide | |
| gridGutters | boolean | Whether to place gutters between the slides that match the grid's gutters | |
| gridGuttersVariant | string | standard | What kind of gutters to place between slides |
| arrowVerticalPosition | string | The vertical position of the arrows, as a CSS "top" property | |
| arrowVerticalOffset | string | "0px" | The vertical offset of the arrows, relative to its CSS "top" property |
All other props are forwarded to the element specified in thecomponentprop(default: <SlickCarousel/>)
CarouselSlide
CarouselSlide has no props of its own
All props are forwarded to the element specified in thecomponentprop(default: <div/>)
Guidelines
Design Guidelines
Limit your use of carousels. Use only when you don't have enough real estate to display all items at once, and horizontal scrolling or expanding is an impediment to the content. Use only with highly visual content such as product images.
Search engines can't see any information that requires user interaction to view, so do not place any SEO-relevant information in a Carousel. (Please consult the Organic Search team with any questions.)
Designer Guidelines
Limit slide frames in a carousel from two to four. Studies have shown that users can't easily recall past five swipes/clicks and are unlikely to swipe more than five times. (Reference: Nielsen Norman Group's number 1 design guideline for carousels.)
If possible, help people feel in control by indicating the amount of content in the carousel.
Keep the controls inside the carousel and easily recognizable.
On a finite carousel, an arrow will not appear when you've scrolled all the way in one direction.
The "full" skin and the "fraction" option override the default values for many properties. If you want to theme the look of these, you will want to place those values inside a selector scoped for that feature, so that it has a high enough specificity, e.g.:
.carousel.carousel-dots-fraction { --visage-my-property: my-fraction-specific-value; }
SEO Considerations
Each image on the carousel must accessible by Googlebot.
Each image on the carousel should have unique personalized
alttext descriptions.