A versatile and interactive element for displaying images or content in a dynamic, scrollable format, enhancing user engagement with smooth transitions and customizable options.
About
The Slider component allows you to create visually appealing slideshows for images or content sections. It supports various configurations, including autoplay, navigation controls, and dynamic content loading. Highly customizable, it provides smooth animations and adaptive layouts for different screen sizes.
Example
The slider component is highly flexible and supports both images and custom content. You can configure its behavior using various props.
Image Slider
The slider can be used to display a series of images. Each Slide component represents an individual image.
<Slider>
<Slide src="..." alt="..." />
<Slide src="..." alt="..." />
<Slide src="..." alt="..." />
</Slider>Custom Content Slider
The slider is not limited to images; you can add any custom content inside the Slide component.
<Slider>
<Slide> <!-- Custom content --> </Slide>
<Slide> <!-- Custom content --> </Slide>
<Slide> <!-- Custom content --> </Slide>
</Slider>Controls & Indicator
The controls prop enables or disables navigation buttons for manually switching between slides. When set to true, users can navigate using previous and next buttons. The value false will hide the controls. Default is true.
The indicator prop allows displaying small indicators (dots) representing each slide. When true, users can click on an indicator to jump to a specific slide. The value false will hide the indicator. Default is true.
<Slider indicator={false} controls={false}> ... </Slider>Auto Play & Stop on Hover
The autoPlay prop determines whether the slider should automatically transition between slides. When set to true, the slides will change automatically at a defined interval. Default is true.
The stopOnHover prop controls whether the autoplay should pause when the user hovers over the slider. If enabled true, the slider will stop moving while hove73C7C7 and resume when the mouse leaves. Default is true.
<Slider stopOnHover={false}> ... </Slider>Timer
The timer prop enables a progress timer that visually represents the time left before transitioning to the next slide. If false, it wil hides the progress bar. Default is true.
<Slider timer={false}> ... </Slider>Slide Duration
The slideDuration prop defines the time (in milliseconds) each slide remains visible before transitioning to the next one. A higher value means slides stay longer. Default is 5000 (5 seconds).
<Slider slideDuration={2000}> ... </Slider>In the example each slide will stay on the display for 2 second.
Transition Duration
The transitionDuration prop specifies the time (in milliseconds) taken for the transition effect between slides. It controls the smoothness of the animation. Default is 750 milliseconds.
<Slider transitionDuration={2000}> ... </Slider>In the example each transition will take 2 second to complete.
Active Slide
The activeSlide prop sets the initial slide that appears when the slider loads. The value corresponds to the slide number. Default is 1.
<Slider activeSlide={2}> ... </Slider>This image slide will set slide 2 as the initial slide.
Custom Controls Icon
Use change the icon in the previous slide and next slide control button using the prevButton and nextButton snippet like below.
<Slider>
<!-- Previous button -->
{#snippet prevButton()}
<Svg size={2} class="opacity-50">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 ... 1 .708.708L5.707 7.5z"/>
</Svg>
{/snippet}
<!-- Previous button -->
{#snippet nextButton()}
<Svg size={2} class="opacity-50">
<path fill-rule="evenodd" d="M6.776 1.553a.5.5 0 ... 0 1 .223-.671"/>
</Svg>
{/snippet}
<Slide src="..." alt="..." />
<Slide src="..." alt="..." />
<Slide src="..." alt="..." />
</Slider>This image slide will set slide 2 as the initial slide.
Customization
The Image Slider provides several props for customizing its appearance. These props allow you to apply custom styles to different parts of the slider.
slideClasses: Applies custom classes to each slide. This allows you to adjust styling such as padding, margins, background, or borders.controlButtonClasses: Defines custom styles for the navigation buttons (previous and next). You can modify their size, color, or position to match your design.indicatorContainerClasses: Applies styles to the container that holds the slide indicators. This is useful for adjusting positioning, spacing, or background styles.indicatorClasses: Customizes the appearance of each slide indicator (dot or other elements). You can modify the shape, size, and color.indicatorActiveClasses: Defines styles for the active indicator. This allows you to highlight the currently active slide differently from the others.indicatorActiveClasses: Applies styles to the timer, which indicates slide progress. You can change its size, color, or animation effects.
By using these props, you can fully customize the slider to fit your design needs.
Accessibility
The Slider component is designed to be accessible, ensuring smooth navigation and usability for all users, including those using assistive technologies.
Keyboard Navigation
The slider supports full keyboard interaction:
- Left Arrow (⬅) moves to the previous slide.
- Right Arrow (➡) moves to the next slide.
- Tab ( ↹ ) navigates through focusable elements such as controls and indicators.
- Enter ( ⏎ ) or Space ( ⎵ ) activates the selected indicator when applicable.
Screen Reader Support
To ensure compatibility with screen readers, the following attributes are applied:
- The slider container includes
aria-live="polite"so screen readers announce slide changes dynamically. - Each slide has
aria-hidden="true"when inactive andaria-hidden="false"when active.
Accessible Controls
Navigation buttons and indicators are labeled to enhance usability:
- The Previous and Next buttons should have
aria-label="Previous Slide"andaria-label="Next Slide", respectively. - Indicators should include
aria-label="Go to slide X"to indicate their function.
These accessibility features ensure a seamless experience for all users, making the Slider component more inclusive and user-friendly.