Carousel CSS Styling

Smart HTML Elements use a pair of css files - smart.default.css and smart.[theme name].css. The default stylesheet creates the styles related to the element's layout like margin, padding, border-width, position. The second CSS file applies the HTML Element's colors, fonts, borders and backgrounds. The smart.default.css should be included before the second CSS file.Below is the list of CSS classes and properties used by the Smart.Carousel.

All Common CSS variables:

  • --smart-primary: The theme primary color.
  • --smart-primary-color: Text color on top of a primary background.
  • --smart-secondary: The theme secondary color.
  • --smart-secondary-color: Text color on top of a secondary background.
  • --smart-error: The theme error color.
  • --smart-error-color: Text color on top of a error background.
  • --smart-success: The theme success color.
  • --smart-success-color: Text color on top of a success background.
  • --smart-background: The theme background color. The background color appears behind scrollable content.
  • --smart-background-color: Text color on top of a background background.
  • --smart-surface: The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus.
  • --smart-surface-color: Text color on top of a surface surface.
  • --smart-disabled: The theme primary color in disabled state.
  • --smart-disabled-color: Text color on top of a theme background in disabled state.
  • --smart-font-size: Theme font-size.
  • --smart-font-family: Theme font-family.
  • --smart-border-width: Theme border-width.
  • --smart-border-radius: Theme border-radius.
  • --smart-border: The theme border settings.
  • --smart-outline: The theme border color.
  • --smart-arrow-size: Font size of the arrow elements.
  • --smart-editor-selection: Background color of the selected text.
  • --smart-editor-selection-color: Color of the selected text.
  • --smart-alternation-index0-color: Alternation color for index0.
  • --smart-alternation-index0-border-color: Alternation border color for index0.
  • --smart-alternation-index0-background: Alternation background color for index0.
  • --smart-alternation-index1-color: Alternation color for index1.
  • --smart-alternation-index1-border-color: Alternation border color for index1.
  • --smart-alternation-index1-background: Alternation background color for index1.
  • --smart-alternation-index2-color: Alternation color for index2.
  • --smart-alternation-index2-border-color: Alternation border color for index2.
  • --smart-alternation-index2-background: Alternation background color for index2.
  • --smart-tick-color: Default tick color for jqxTank, jqxSlider and jqxGauge.
  • --smart-tick-label-color: Default tick label color for jqxTank, jqxSlider and jqxGauge.
  • --smart-box-height: Default height for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-box-width: Default width for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-bar-height: Default height for headers and footers.
  • --smart-bar-width: Default width for headers and footers.
  • --smart-editor-height: Default height for editors.
  • --smart-editor-width: Default width for editors.
  • --smart-editor-drop-down-width: Default width for editors drop-down.
  • --smart-editor-drop-down-height: Default height for editors drop-down.
  • --smart-editor-label-padding: Default padding for inputs.
  • --smart-editor-addon-width: Default width for spin buttons, dropdown buttons.

Specific CSS variables for Carousel styling:

  • --smart-carousel-default-width: Default width of the element.
  • --smart-carousel-default-height: Default height of the element.
  • --smart-carousel-3d-mode-slide-width: Default width of a slide in 3d mode.
  • --smart-carousel-3d-mode-slide-height: Default height of a slide in 3d mode.
  • --smart-carousel-multiple-mode-slide-width: Default width of a slide in multiple mode.

The following CSS selectors can be used to style Carousel:

  • smart-carousel - the element itself. Can be used to set width and height for the whole element.
    • .smart-container - the container that holds all of the internals of the element.
      • .smart-items-container- applied to a container where are stored carousel's slides.
        • .smart-carousel-item - applied to div element, used as carousel slide.
          • .smart-carousel-item-contaiener - applied to div element, used to contain slide's headline and text content and background image.
            • .smart-carousel-item-label - applied to h2 element, used to contain slide's headline.
            • .smart-carousel-item-content - applied to div element, used to contain slide's text.
          • .smart-carousel-html-content - applied to div element, used to contain custom HTML content.
      • .smart-arrow-left- applied to smart-repeat-button used as left navigation arrow.
      • .smart-arrow-right - applied to smart-repeat-button used as right navigation arrow.
      • .smart-indicators-container - applied to div element, used as indicators container.
        • .smart-indicator - applied to span element, used as indicator.