# Swiper
**Also known as:** TouchSlider
## Description
Swiper (touch slider) lets people show their items in a swiping row. Unlike the Carousel, which pages through its slides, the swiper is a real scrolling region: the items sit side by side and the row scrolls freely through them, so a touch swipe carries the momentum of the platform and nothing crosses over to .NET while a finger is on the screen. It can be moved with its next/prev buttons and dots, by dragging it, with the keyboard or the mouse wheel, programmatically, or on its own with autoplay; it can settle on an item instead of stopping anywhere (Snap), size its items to a number that fit at a time (adapting that to its own width), scroll vertically, and it follows the carousel pattern of the ARIA authoring practices: a labelled region of labelled items, real buttons for every control, and a rotation that stops as soon as the pointer or the keyboard focus reaches it.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Accent | `BitColorKind?` | null | Specifies the accent color kind of the component, which colors the dot of the current page. Color takes precedence over it when both are set. |
| AnimationDuration | `double` | 0.5 | Sets the duration of the scrolling animation in seconds (the default value is 0.5). A value of 0 moves the items at once. |
| AutoPlay | `bool` | false | Enables/disables the auto scrolling of the items. |
| AutoPlayInterval | `double` | 2000 | Sets the interval of the auto scrolling in milliseconds (the default value is 2000). |
| AutoPlayReverse | `bool` | false | Plays the auto scrolling backwards, from the last item towards the first one. |
| ChildContent | `RenderFragment?` | null | Items of the swiper. |
| Classes | `BitSwiperClassStyles?` | null | The custom CSS classes for the different parts of the swiper. |
| Color | `BitColor?` | null | The general color of the swiper, applied to the dot of the current page and the next/prev and play/pause buttons. |
| DefaultItem | `int` | 1 | The item (1 based, like GoTo) the swiper starts on when it first renders. Values outside of the range of the swiper are clamped to its first or last item. |
| DotAriaLabel | `string` | Slide | The accessible label of a dot of the swiper, followed by the number of the page it navigates to. |
| DotsAriaLabel | `string` | Choose slide to display | The accessible label of the dots container of the swiper. |
| DotTemplate | `RenderFragment<int>?` | null | The custom content of a dot of the swiper, receiving the zero based index of the page the dot navigates to. |
| DragThreshold | `int` | 5 | The distance (in pixels) the pointer has to travel over the swiper before it starts dragging it, instead of the press staying a click. |
| Gap | `string?` | null | The space between the items of the swiper (any CSS length, for example 1rem), which VisibleItemsCount takes into account. |
| HideNextPrev | `bool` | false | Hides the Next/Prev buttons of the BitSwiper. Each button also hides itself at the end it cannot move any further towards. |
| ItemAriaLabelFormat | `string?` | null | The accessible label of an item of the swiper, as a composite format string whose {0} is the 1 based position of the item and whose {1} is the number of items ("{0} of {1}" by default). |
| NextAriaLabel | `string?` | null | The accessible label of the next button of the swiper (the default value is "Next slide"). |
| NextIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the next navigation button using custom CSS classes for external icon libraries. Takes precedence over NextIconName when both are set. |
| NextIconName | `string?` | null | Gets or sets the name of the icon to display in the next navigation button from the built-in Fluent UI icons. |
| NoDrag | `bool` | false | Disables dragging the swiper with the mouse. A touch swipe is the browser's own scrolling of the region and is not taken away. |
| NoKeyboard | `bool` | false | Removes the swiper from the tab sequence and turns off its keyboard navigation. |
| OnChange | `EventCallback<int>` | | The event that will be called with the zero based index of the item the swiper came to stand on, however it was moved. |
| PauseButtonAriaLabel | `string` | Stop automatic slide show | The accessible label of the play/pause button while the auto scrolling is running. |
| PauseIcon | `BitIconInfo?` | null | Gets or sets the icon of the play/pause button while the auto scrolling is running, using custom CSS classes for external icon libraries. |
| PauseIconName | `string?` | null | Gets or sets the name of the icon of the play/pause button while the auto scrolling is running, from the built-in Fluent UI icons. |
| PauseOnFocus | `bool` | true | Pauses the auto scrolling while the keyboard focus is inside the swiper. |
| PauseOnHover | `bool` | true | Pauses the auto scrolling while the pointer is over the swiper. |
| PlayButtonAriaLabel | `string` | Start automatic slide show | The accessible label of the play/pause button while the auto scrolling is paused. |
| PlayIcon | `BitIconInfo?` | null | Gets or sets the icon of the play/pause button while the auto scrolling is paused, using custom CSS classes for external icon libraries. |
| PlayIconName | `string?` | null | Gets or sets the name of the icon of the play/pause button while the auto scrolling is paused, from the built-in Fluent UI icons. |
| PrevAriaLabel | `string?` | null | The accessible label of the previous button of the swiper (the default value is "Previous slide"). |
| PrevIcon | `BitIconInfo?` | null | Gets or sets the icon to display in the previous navigation button using custom CSS classes for external icon libraries. Takes precedence over PrevIconName when both are set. |
| PrevIconName | `string?` | null | Gets or sets the name of the icon to display in the previous navigation button from the built-in Fluent UI icons. |
| ScrollItemsCount | `int` | 1 | Number of items that is going to be changed on navigation, which is the step of the buttons, the arrow keys and the mouse wheel. |
| ShowDots | `bool` | false | Renders the navigation dots below the items of the swiper, one per screenful of it. |
| ShowPlayPause | `bool` | false | Renders a play/pause button next to the dots, so the auto scrolling can be stopped and started again. |
| ShowScrollbar | `bool` | false | Leaves the scrollbar of the swiper visible, which is hidden by default. |
| Size | `BitSize?` | null | The size of the dots and of the next/prev buttons of the swiper. |
| Snap | `BitSwiperSnap?` | null | Settles the swiper on an item instead of leaving it wherever the scrolling ran out, and chooses where that item comes to rest. |
| StopOnInteraction | `bool` | false | Stops the auto scrolling as soon as the swiper is navigated by hand. |
| StopOnLastSlide | `bool` | false | Stops the auto scrolling at the end of the swiper instead of rewinding to its start. |
| Styles | `BitSwiperClassStyles?` | null | The custom CSS styles for the different parts of the swiper. |
| Vertical | `bool` | false | Stacks the items vertically, so the swiper scrolls up and down instead of left and right. |
| VisibleItemsCount | `int?` | null | Number of items that is visible in the swiper, which sizes the items accordingly. Without it the items keep whatever size they were given. |
| VisibleItemsCountXs | `int?` | null | Number of visible items in the extra small breakpoint (from 0 up). |
| VisibleItemsCountSm | `int?` | null | Number of visible items in the small breakpoint (from 600px up). |
| VisibleItemsCountMd | `int?` | null | Number of visible items in the medium breakpoint (from 960px up). |
| VisibleItemsCountLg | `int?` | null | Number of visible items in the large breakpoint (from 1280px up). |
| VisibleItemsCountXl | `int?` | null | Number of visible items in the extra large breakpoint (from 1920px up). |
| VisibleItemsCountXxl | `int?` | null | Number of visible items in the extra extra large breakpoint (from 2560px up). |
| Wheel | `bool` | false | Navigates the swiper with the wheel of the mouse (or with a two finger scroll on a trackpad). |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| CurrentIndex | `int` | | The zero based index of the item the swiper is currently standing on. |
| CurrentPage | `int` | | The zero based index of the screenful (page) the swiper is currently showing. |
| IsAtStart | `bool` | | Whether the swiper is scrolled all the way to its start. |
| IsAtEnd | `bool` | | Whether the swiper is scrolled all the way to its end. |
| IsPaused | `bool` | | Whether the auto scrolling has been paused through Pause or the play/pause button. |
| IsPlaying | `bool` | | Whether the auto scrolling is currently running. |
| ItemsCount | `int` | | The number of items of the swiper. |
| PagesCount | `int` | | The number of screenfuls (pages) the items of the swiper take up. |
| GoNext | `Task` | | Navigates to the next swiper item. |
| GoPrev | `Task` | | Navigates to the previous swiper item. |
| GoTo | `Task` | | Navigates to the given swiper item number (1 based). |
| GoToPage | `Task` | | Navigates to the given swiper page number (1 based), a page being one screenful of the swiper. |
| GoToStart | `Task` | | Navigates to the start of the swiper. |
| GoToEnd | `Task` | | Navigates to the end of the swiper. |
| Pause | `void` | | Pauses the AutoPlay if enabled. |
| Resume | `void` | | Resumes the AutoPlay if enabled. |
| TogglePlay | `void` | | Pauses the AutoPlay when it is running, and resumes it when it is paused. |
| Refresh | `Task` | | Measures the swiper again and reports where it stands. |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitSwiperSnap Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Start | 0 | The item settles with its leading edge at the start of the swiper. |
| Center | 1 | The item settles in the middle of the swiper. |
| End | 2 | The item settles with its trailing edge at the end of the swiper. |
### BitColorKind Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | The primary color kind. |
| Secondary | 1 | The secondary color kind. |
| Tertiary | 2 | The tertiary color kind. |
| Transparent | 3 | The transparent color kind. |
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitSwiperClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitSwiper. |
| Container | `string?` | null | Custom CSS classes/styles for the scrolling container of the BitSwiper. |
| Item | `string?` | null | Custom CSS classes/styles for the items of the BitSwiper. |
| CurrentItem | `string?` | null | Custom CSS classes/styles for the item the swiper is currently standing on. |
| Buttons | `string?` | null | Custom CSS classes/styles for the next/prev buttons of the BitSwiper. |
| ButtonIcons | `string?` | null | Custom CSS classes/styles for the icons of the next/prev buttons of the BitSwiper. |
| NextButton | `string?` | null | Custom CSS classes/styles for the next button of the BitSwiper. |
| NextButtonIcon | `string?` | null | Custom CSS classes/styles for the icon of the next button of the BitSwiper. |
| PrevButton | `string?` | null | Custom CSS classes/styles for the previous button of the BitSwiper. |
| PrevButtonIcon | `string?` | null | Custom CSS classes/styles for the icon of the previous button of the BitSwiper. |
| DotsContainer | `string?` | null | Custom CSS classes/styles for the dots container of the BitSwiper. |
| Dots | `string?` | null | Custom CSS classes/styles for the dot elements of the BitSwiper. |
| CurrentDot | `string?` | null | Custom CSS classes/styles for the current dot element of the BitSwiper. |
| PlayPauseButton | `string?` | null | Custom CSS classes/styles for the play/pause button of the BitSwiper. |
| PlayPauseButtonIcon | `string?` | null | Custom CSS classes/styles for the icon of the play/pause button of the BitSwiper. |
### BitIconInfo Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Name | `string?` | null | Gets or sets the name of the icon. |
| BaseClass | `string?` | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | `string?` | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
## Examples
\n**Basic**:
```razor
@for (int i = 1; i <= 32; i++)
{
var index = i;
var imageIndex = (index - 1) % 4 + 1;
.jpg)
}
```
\n**ScrollItemsCount**:
```razor
@for (int i = 1; i <= 32; i++)
{
var index = i;
var imageIndex = (index - 1) % 4 + 1;
}
```
\n**HideNextPrev**:
```razor
@for (int i = 1; i <= 32; i++)
{
var index = i;
var imageIndex = (index - 1) % 4 + 1;
}
```
\n**Snap**:
```razor
@for (int i = 1; i <= 12; i++)
{
var index = i;
@for (int i = 1; i <= 12; i++)
{
var index = i;
@for (int i = 1; i <= 12; i++)
{
var index = i;
```
\n**Multiple items**:
```razor
@for (int i = 1; i <= 16; i++)
{
var index = i;
@for (int i = 1; i <= 16; i++)
{
var index = i;
```
\n**Gap**:
```razor
@for (int i = 1; i <= 16; i++)
{
var index = i;
```
\n**Vertical**:
```razor
@for (int i = 1; i <= 12; i++)
{
var index = i;
```
\n**Dots**:
```razor
@for (int i = 1; i <= 16; i++)
{
var index = i;
@(index + 1)
@for (int i = 1; i <= 16; i++)
{
var index = i;
```
\n**AutoPlay**:
```razor
@for (int i = 1; i <= 16; i++)
{
var index = i;
@for (int i = 1; i <= 16; i++)
{
var index = i;
```
\n**Interaction**:
```razor
@for (int i = 1; i <= 16; i++)
{
var index = i;
@for (int i = 1; i <= 16; i++)
{
var index = i;
```
\n**Animation**:
```razor
@for (int i = 1; i <= 16; i++)
{
var index = i;
@for (int i = 1; i <= 16; i++)
{
var index = i;
```
\n**DefaultItem**:
```razor
@for (int i = 1; i <= 16; i++)
{
var index = i;
```
\n**Public API**:
```razor
@for (int i = 1; i <= 16; i++)
{
var index = i;
< Prev
Next >
GoTo
Start
End
@for (int i = 1; i <= 12; i++)
{
var index = i;
var imageIndex = (index - 1) % 4 + 1;
}
```
\n**Color**:
```razor
@for (int i = 1; i <= 6; i++)
{
var index = i;
@for (int i = 1; i <= 6; i++)
{
var index = i;
@for (int i = 1; i <= 6; i++)
{
var index = i;
@for (int i = 1; i <= 6; i++)
{
var index = i;
@for (int i = 1; i <= 6; i++)
{
var index = i;
@for (int i = 1; i <= 6; i++)
{
var index = i;
```
\n**External Icons**:
```razor
@for (int i = 1; i <= 8; i++)
{
var index = i;
var imageIndex = (index - 1) % 4 + 1;
}
@for (int i = 1; i <= 8; i++)
{
var index = i;
var imageIndex = (index - 1) % 4 + 1;
}
```
\n**Size**:
```razor
@for (int i = 1; i <= 6; i++)
{
var index = i;
@for (int i = 1; i <= 6; i++)
{
var index = i;
@for (int i = 1; i <= 6; i++)
{
var index = i;
```
\n**Style & Class**:
```razor
@for (int i = 1; i <= 16; i++)
{
var index = i;
```
\n**RTL**:
```razor
@for (int i = 1; i <= 16; i++)
{
var index = i;
```
Item @index
Item @index
Item @index
@index
@index
@index
@index
@index
@index
@index
@index
@index
@index
@index
@index
@index
@index
@index
@index
@index
Current item: @(currentIndex + 1)
```
```csharp
private int number = 1;
private int currentIndex;
private BitSwiper swiper = default!;
private async Task GoNext() => await swiper.GoNext();
private async Task GoPrev() => await swiper.GoPrev();
private async Task GoTo() => await swiper.GoTo(number);
private async Task GoToStart() => await swiper.GoToStart();
private async Task GoToEnd() => await swiper.GoToEnd();
```
\n**Accessibility**:
```razor
@index
@index
@index
@index
@index
@index
Item @index
Item @index
@index
@index
@index
@index
مورد @index