Lists
Carousel
Bit.BlazorUISlideShow
Carousel (slideshow) shows a set of items across sliding pages. Navigate it with its buttons and dots, by dragging, with the keyboard or the wheel, from code, or let it play on its own. It shows one or several items at a time (adapting to its own width), scrolls horizontally or vertically, or cross-fades, and follows the ARIA carousel pattern.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
One slide at a time, with next/prev buttons and dots. Drag it, or focus it and use the arrow keys, Home and End.
Name it with AriaLabel so screen readers announce what it holds.
1 / 4
InfiniteScrolling
Loops from the last slide back to the first, so both buttons stay available.
Aurora
This is Aurora and it's fantastic
HideDots & HideNextPrev
HideDots removes the dots and HideNextPrev the buttons. Without them the carousel is still dragged, and
operated with the keyboard.
Multiple items
VisibleItemsCount shows several slides side by side and ScrollItemsCount sets how many one step moves.
A dot stands for one step, so three visible slides moved one at a time get a dot per slide.
Gap (any CSS length) spaces the slides without changing how many fit.
Three at a time, moved three at a time:
1
2
3
Three at a time, moved one at a time, with a 1rem gap:
1
2
3
Responsive
Both follow the width of the carousel itself, not of the window. ResponsiveOptions apply while the carousel is
no wider than their Breakpoint (the narrowest match wins). The shorthand VisibleItemsCountXs to
VisibleItemsCountXxl apply from the shared breakpoints upwards (0, 600, 960, 1280, 1920 and 2560px).
Resize the window to watch them change.
1
2
3
4
1
Vertical & DotsPlacement
Vertical scrolls up and down: the buttons move to the top and bottom edges and the up/down arrow keys
navigate. Give it a height. DotsPlacement places the dots at the Bottom (default), Top, or in a column at the
Start or End.
1 / 4
1
Fade & AnimationDuration
Fade cross-fades one slide at a time instead of sliding. AnimationDuration sets the length of either
motion in seconds (0.5 by default, 0 for none); it collapses when reduced motion is requested.
1 / 4
1
1
AutoPlay
AutoPlay advances every AutoPlayInterval milliseconds. It pauses while the pointer or the keyboard focus
is inside (PauseOnHover, PauseOnFocus) and while the tab is hidden, and starts paused when reduced
motion is requested (unless ForceAnimation). ShowPlayPause adds the pause control WCAG asks of moving
content, and StopOnInteraction stops for good once navigated by hand.
1 / 4
AutoPlayReverse plays backwards; StopOnLastSlide stops at the end instead of rewinding (a carousel
without InfiniteScrolling only).
1
1
Interaction
Wheel navigates with the mouse wheel or a trackpad, NoDrag turns dragging off, DragThreshold
sets how far a drag travels before it moves, and NoKeyboard takes the carousel out of the tab order.
A drag across the scrolling axis is left to the page, and the click that ends a drag never reaches a link under it.
Binding & public API
@bind-SelectedPage (1 based) keeps the page in sync both ways, here with a BitPagination; DefaultPage
only picks the page an unbound carousel starts on. Through a @ref, GoNext, GoPrev and
GoTo navigate, Pause, Resume and TogglePlay drive the autoplay, and Refresh
re-measures it; CurrentPage (zero based), PagesCount, ItemsCount, IsPlaying and
IsPaused report its state. OnChange reports each move with the zero based page index.
2 / 4
SelectedPage: 2, last OnChange index: 0
Dots & thumbnails
DotTemplate fills each dot (it receives the zero based page index), which then sizes to its content and keeps
its label and its aria-current marker, which also styles the current one. For a strip outside the carousel, bind
SelectedPage.
Numbered dots:
1
Thumbnail dots:
External thumbnail strip:
Accessibility
Follows the ARIA carousel pattern: a labelled region of labelled slides, buttons wired with aria-controls, off-screen
slides made inert, and the play/pause button first in the tab order. The dots are a single tab stop, and the focus is
never lost: it follows the arrow keys to the new dot, and leaves a button or a slide that moves out of view. Arrow keys
typed into a field stay with the field. The dots meet 3:1 contrast, and the current one is also marked by its shape.
Every label is yours to set:
- AriaLabel names the region; a slide's own AriaLabel names that slide.
- ItemAriaLabelFormat names the other slides ("{0} of {1}" by default).
- DotsAriaLabel names the dots group; DotAriaLabel prefixes each dot's page number.
- GoLeftAriaLabel / GoRightAriaLabel name the buttons (by default after what they do, which flips in RTL).
- PlayButtonAriaLabel / PauseButtonAriaLabel name the rotation control in each state.
CSS variables
The public --bit-Carousel-* variables (listed in the CSS variables table below) restyle the chrome without
touching its classes. They inherit, so set them on :root, on an ancestor, or on one carousel's Style.
Cascading parameters
BitParams carries a BitCarouselParams to every carousel under it, so a gallery sets the shared behavior
once. It is a default, not an override: a carousel keeps whatever it sets itself (the second one keeps its dots).
1
1
Color
Color paints the current dot, the buttons and the focus ring with a theme color. Accent is the lighter
option that only colors the current dot (primary, secondary, tertiary or transparent).
1
1
1
1
1
1
External Icons
Use icons from external libraries like FontAwesome and Bootstrap Icons with GoLeftIcon and GoRightIcon
(and PlayIcon / PauseIcon for the play/pause button).
FontAwesome:
Bootstrap Icons:
Size
Sizes the dots and the navigation buttons.
1
1
1
Style & Class
Styles and Classes reach every part: the container, the items and the ones on screen (Item,
CurrentItem), the buttons and their icons, the dots and the current dot, and the play/pause button.
1
RTL
Right-to-left: the slides run from the right, and the buttons and arrow keys flip with them.
یک
دو
سه
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.
BitCarousel CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-Carousel-height | spacing(25) | Height of the carousel. Style or a class on one carousel can set its height directly as well. |
| --bit-Carousel-gap | 0px | Space between the slides; the Gap parameter wins over it. |
| --bit-Carousel-easing | --bit-mot-easing | Timing function of the slide and fade motion. |
| --bit-Carousel-focus-color | --bit-clr-pri-focus (the Color role's focus color) | Focus ring color of the carousel and of its buttons and dots. |
| --bit-Carousel-button-color | --bit-clr-fg-pri (the Color role's main color) | Glyph color of the next/prev and play/pause buttons, and the color of templated dots. |
| --bit-Carousel-button-hover-color | --bit-clr-fg-pri-hover (the Color role's hover color) | The same glyphs while hovered (pointer devices only). |
| --bit-Carousel-button-background | transparent | Background of the next/prev and play/pause buttons; a translucent scrim keeps them legible over busy slides. |
| --bit-Carousel-button-hover-background | The rest background | Background of the buttons while hovered. |
| --bit-Carousel-button-opacity | 0.5 | Opacity of the buttons at rest. |
| --bit-Carousel-button-hover-opacity | 0.9 | Opacity of the buttons while hovered. |
| --bit-Carousel-button-size | Per Size, 1.5 times the icon size (--bit-siz-icon-sm / -md / -lg) | Glyph size of the next/prev buttons. |
| --bit-Carousel-button-width | 10% | Hit area of the next/prev buttons across the scrolling axis (their height in a vertical carousel). |
| --bit-Carousel-dot-color | --bit-clr-brd-pri | Color of the dots. |
| --bit-Carousel-dot-hover-color | --bit-clr-brd-pri-hover | Color of a hovered dot. |
| --bit-Carousel-dot-current-color | The Accent / Color role's main color | Color of the dot of the current page (the text color of a templated one). |
| --bit-Carousel-dot-current-hover-color | The Accent / Color role's hover color | Color of the current dot while hovered. |
| --bit-Carousel-dot-size | Per Size (8px / 10px / 14px) | Diameter of the dots. |
| --bit-Carousel-dot-current-length | Twice the dot size | Length of the current dot along the dots row (its height in a Start/End column); the dot size makes it a circle again. |
| --bit-Carousel-dot-radius | --bit-shp-radius-full | Corner radius of the dots. |
| --bit-Carousel-dots-gap | The room that keeps the dots 24px apart | Space between the dots. The default meets the WCAG 2.2 target spacing for dots smaller than 24px. |
| --bit-Carousel-dots-margin | spacing(1.25) | Space between the slides and the dots, on whichever side DotsPlacement puts them. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitCarousel 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). |
| AutoPlay | bool | false | Enables/disables the auto scrolling of the slides. It pauses while hovered, focused or in a hidden tab, and starts paused under prefers-reduced-motion unless ForceAnimation is set. |
| 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 slide towards the first one. |
| ChildContent | RenderFragment? | null | Items of the carousel. |
| Classes | BitCarouselClassStyles? | null | The custom CSS classes for the different parts of the carousel. |
| Color | BitColor? | null | The general color of the carousel, applied to the dot of the current page, the next/prev and play/pause buttons, and the focus ring. |
| DefaultPage | int | 1 | The page (1 based, like GoTo) the carousel shows when it first renders. Values outside of the range of the carousel are clamped to its first or last page. |
| DotAriaLabel | string | Slide | The accessible label of a dot of the carousel, 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 carousel. |
| DotsPlacement | BitPlacement? | null | Where the dots (and the play/pause button) are placed around the slides: Bottom (the default), Top, or in a column at the Start or End, which follow the reading direction. Every other value renders the default. |
| DotTemplate | RenderFragment<int>? | null | The custom content of a dot of the carousel, receiving the zero based index of the page the dot navigates to. A dot that holds content is laid out around it instead of being drawn as the default circle. |
| DragThreshold | int | 20 | The distance (in pixels) the pointer has to travel over the carousel before it moves to another page. The click that ends a longer drag is swallowed, so a link or a button under the pointer is not followed. |
| Fade | bool | false | Cross-fades the slides in place instead of sliding them. A fading carousel shows exactly one slide at a time. |
| Gap | string? | null | The space between the slides of the carousel (any CSS length, for example 1rem). |
| GoLeftAriaLabel | string? | null | The accessible label of the go to left button. When not set, the button is labelled after what it does (next or previous slide, depending on the direction). |
| GoLeftIcon | BitIconInfo? | null | Gets or sets the icon for the go to left button using custom CSS classes for external icon libraries. Takes precedence over GoLeftIconName when both are set. |
| GoLeftIconName | string? | null | Gets or sets the name of the icon for the go to left button from the built-in Fluent UI icons. |
| GoRightAriaLabel | string? | null | The accessible label of the go to right button. When not set, the button is labelled after what it does (previous or next slide, depending on the direction). |
| GoRightIcon | BitIconInfo? | null | Gets or sets the icon for the go to right button using custom CSS classes for external icon libraries. Takes precedence over GoRightIconName when both are set. |
| GoRightIconName | string? | null | Gets or sets the name of the icon for the go to right button from the built-in Fluent UI icons. |
| HideDots | bool | false | Hides the Dots indicator at the bottom of the BitCarousel. The dots are also left out when everything fits on a single page. |
| HideNextPrev | bool | false | Hides the Next/Prev buttons of the BitCarousel. Each button also hides itself at the end it cannot move any further towards, unless InfiniteScrolling is enabled. |
| InfiniteScrolling | bool | false | If enabled the carousel items will navigate in an infinite loop (first item comes after last item and last item comes before first item). |
| ItemAriaLabelFormat | string? | null | The accessible label of a slide of the carousel, as a composite format string whose {0} is the 1 based position of the slide and whose {1} is the number of slides ("{0} of {1}" when not set). It is only used for the slides that were not given an AriaLabel of their own. |
| NoDrag | bool | false | Disables dragging the carousel with the pointer. |
| NoKeyboard | bool | false | Removes the carousel from the tab sequence and turns off its keyboard navigation (arrow keys, Home and End). |
| OnChange | EventCallback<int> | The event that will be called on carousel page navigation. The provided value is the zero based index of the page the carousel moved to. | |
| PauseButtonAriaLabel | string | Stop automatic slide show | The accessible label of the play/pause button while the auto scrolling is running. |
| PauseIcon | BitIconInfo? | null | The icon of the play/pause button while the auto scrolling is running, using custom CSS classes for external icon libraries. Takes precedence over PauseIconName. |
| PauseIconName | string? | null | 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 carousel. |
| PauseOnHover | bool | true | Pauses the auto scrolling while the pointer is over the carousel. |
| PlayButtonAriaLabel | string | Start automatic slide show | The accessible label of the play/pause button while the auto scrolling is paused. |
| PlayIcon | BitIconInfo? | null | The icon of the play/pause button while the auto scrolling is paused, using custom CSS classes for external icon libraries. Takes precedence over PlayIconName. |
| PlayIconName | string? | null | The name of the icon of the play/pause button while the auto scrolling is paused, from the built-in Fluent UI icons. |
| ResponsiveOptions | IEnumerable<BitCarouselResponsiveOption>? | null | Adapts VisibleItemsCount and ScrollItemsCount to the width of the carousel. Each option applies while the carousel is no wider than its Breakpoint, and the narrowest matching one wins. |
| ScrollItemsCount | int | 1 | Number of items that is going to be changed on navigation. It is clamped to VisibleItemsCount, and a non-infinite carousel moves by fewer items near its ends so its first and last pages always stay full. Together with VisibleItemsCount it also decides where the carousel stops, which is what the dots stand for and what OnChange reports. |
| SelectedPage | int | 0 | The page (1 based, like GoTo) the carousel is showing, bindable two ways with @bind-SelectedPage. Setting it moves the carousel there, every move writes it back, and it takes the place of DefaultPage on the first render. Out of range values are clamped and written back. |
| ShowPlayPause | bool | false | Renders a play/pause button next to the dots, so the auto scrolling can be stopped and started again. Only rendered while AutoPlay is enabled. |
| Size | BitSize? | null | The size of the dots and of the next/prev buttons of the carousel. |
| StopOnInteraction | bool | false | Stops the auto scrolling as soon as the carousel is navigated by hand. Once stopped this way the rotation only comes back through Resume or the play/pause button. |
| StopOnLastSlide | bool | false | Stops the auto scrolling on the last page instead of rewinding to the first one. It has no effect while InfiniteScrolling is enabled. |
| Styles | BitCarouselClassStyles? | null | The custom CSS styles for the different parts of the carousel. |
| Vertical | bool | false | Stacks the slides vertically, so the carousel scrolls up and down instead of left and right. |
| VisibleItemsCount | int | 1 | Number of items that is visible in the carousel. The Xs to Xxl variants override it responsively, based on the width of the carousel itself. |
| 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 carousel with the wheel of the mouse (or with a two finger scroll on a trackpad). |
BitCarousel public members
| Name | Type | Default value | Description |
|---|---|---|---|
| CurrentPage | int | The zero based index of the page the carousel is currently showing (SelectedPage minus one). | |
| ItemsCount | int | The number of items (slides) of the carousel. | |
| PagesCount | int | The number of pages of the carousel. | |
| IsPlaying | bool | Whether the auto scrolling is currently running. | |
| IsPaused | bool | Whether the auto scrolling has been paused through Pause or the play/pause button, or started paused under reduced motion. | |
| GoNext | Task | Navigates to the next carousel item. | |
| GoPrev | Task | Navigates to the previous carousel item. | |
| GoTo | Task | Navigates to the given carousel page number (1 based). | |
| 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 carousel again and lays its slides out accordingly. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| 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. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| 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. |
| 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. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| 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. |
BitCarouselItem properties
A single slide of the BitCarousel.
| Name | Type | Default value | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The content of the carousel item (slide). |
| Index | int | 0 | The zero based position of this item among the items of its carousel (read-only, assigned by the carousel). |
BitCarouselResponsiveOption properties
The layout a BitCarousel takes while it is no wider than a given breakpoint. A member that is left unset keeps the value of the matching parameter of the carousel.
| Name | Type | Default value | Description |
|---|---|---|---|
| Breakpoint | double | 0 | The largest width (in pixels) of the carousel this option applies to. |
| VisibleItemsCount | int? | null | The number of items that is visible in the carousel while this option applies. |
| ScrollItemsCount | int? | null | The number of items a navigation moves while this option applies. |
BitCarouselClassStyles properties
The custom CSS classes and styles of the different parts of the BitCarousel.
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitCarousel. |
| Container | string? | null | Custom CSS classes/styles for the container of the BitCarousel. |
| Item | string? | null | Custom CSS classes/styles for the items (slides) of the BitCarousel. |
| CurrentItem | string? | null | Custom CSS classes/styles for the items (slides) of the BitCarousel that are currently on screen. |
| Buttons | string? | null | Custom CSS classes/styles for the next/prev buttons of the BitCarousel. |
| ButtonIcons | string? | null | Custom CSS classes/styles for the icons of the next/prev buttons of the BitCarousel. |
| GoLeftButton | string? | null | Custom CSS classes/styles for the go to left button of the BitCarousel. |
| GoLeftButtonIcon | string? | null | Custom CSS classes/styles for the icon of the go to left button of the BitCarousel. |
| GoRightButton | string? | null | Custom CSS classes/styles for the go to right button of the BitCarousel. |
| GoRightButtonIcon | string? | null | Custom CSS classes/styles for the icon of the go to right button of the BitCarousel. |
| DotsContainer | string? | null | Custom CSS classes/styles for the dots container of the BitCarousel. |
| Dots | string? | null | Custom CSS classes/styles for the dot elements of the BitCarousel. |
| CurrentDot | string? | null | Custom CSS classes/styles for the current dot element of the BitCarousel. |
| PlayPauseButton | string? | null | Custom CSS classes/styles for the play/pause button of the BitCarousel. |
| PlayPauseButtonIcon | string? | null | Custom CSS classes/styles for the icon of the play/pause button of the BitCarousel. |
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. |
BitPlacement enum
| Name | Value | Description |
|---|---|---|
| Top | 0 | The top edge. |
| Bottom | 1 | The bottom edge. |
| Start | 2 | The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top. |
| End | 3 | The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom. |
| Left | 4 | The left edge, in both reading directions. |
| Right | 5 | The right edge, in both reading directions. |
| Center | 6 | The middle of the axis, against neither edge. |
| TopAndBottom | 7 | Both edges of the block axis at once. |
| StartAndEnd | 8 | Both edges of the inline axis at once, following the reading direction the way Start and End do. |
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. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.