Swiper
Swipers (touch slider) let people show their slides in a swiping row.
Usage
Basic Swiper
1
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
2
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
3
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
4
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
5
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
6
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
7
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
8
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
9
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
10
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
11
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
12
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
13
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
14
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
15
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
16
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
17
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
18
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
19
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
20
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
21
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
22
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
23
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
24
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
25
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
26
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
27
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
28
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
29
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
30
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
31
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
32
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
RTL Swiper
یک
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
دو
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
سه
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
چهار
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
پنج
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
شش
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
هفت
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
هشت
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
نه
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
ده
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
11
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
12
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
13
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
14
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
15
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
16
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
17
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
18
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
19
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
20
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
21
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
22
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
23
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
24
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
25
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
26
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
27
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
28
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
29
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg)
30
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg)
31
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg)
32
![](_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg)
Implementation
BitSwiper parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
ChildContent | RenderFragment? | null | Items of the swiper. |
ShowNextPrev | bool | true | Shows or hides the Next/Prev buttons of the BitSwiper. |
ScrollItemsCount | int | 1 | Number of items that is going to be changed on navigation. |
AnimationDuration | double | 0.5 | Sets the duration of the scrolling animation in seconds (the default value is 0.5). |
BitComponentBase parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
AriaLabel | string? | null | The aria-label of the control for the benefit of screen readers. |
Class | string? | null | Custom CSS class for the root element of the component. |
Dir | BitDir? | null | Determines the component direction. |
HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the component's parameters. |
Id | string? | null | Custom id attribute for the root element. if null the UniqueId will be used instead. |
IsEnabled | bool | true | Whether or not the component is enabled. |
Style | string? | null | Custom CSS style for the root element of the component. |
Visibility | BitVisibility | BitVisibility.Visible | Whether the component is visible, hidden or collapsed. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
---|---|---|---|
UniqueId | Guid | Guid.NewGuid() | The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction. |
RootElement | ElementReference | The ElementReference of the root element. |
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. |