Carousel

Usage

Presentation

This is the display format for the ShCarousel constructor, designed to showcase its capabilities.

Example Basic

This is Carousel component, testing title

This is subtitle

Republic of Gamers

For Those Who Dare

ROG makes the best hardware for PC gaming, eSports, and overclocking. Our innovations deliver top performance and premium experiences for everyone.

Microsoft sets non-profit to cut software related carbon emissions.

Axios gets you smarter, faster on what matters.

This is a representation of additional field for text, if it is needed. It also has a full Markdown capability.

Can't Beat The Real Thing

Slogan used in USA, UK, Ireland & Canada

This slogan Coca-Cola used in 1990s until 1993 when it got changed to Always Coca-Cola

Think Different

Apple

Shows the brand that built over the years using innovation to create its impact on the users.

Republic of Gamers

For Those Who Dare

ROG makes the best hardware for PC gaming, eSports, and overclocking. Our innovations deliver top performance and premium experiences for everyone.

Microsoft sets non-profit to cut software related carbon emissions.

Axios gets you smarter, faster on what matters.

This is a representation of additional field for text, if it is needed. It also has a full Markdown capability.

This is how it is constructed

::ShCarousel
---
title: This is Carousel component, testing title
subtitle: This is subtitle
items:
  - component: ShMicroCard
    props:
      urlImage: "https://assets-global.website-files.com/5e19ea5aa7d3a217492e372b/624de949df5a11680ab170b9_Axios%20logo%20-%20RGB%20-%20minimum%20space.png"
      urlWrapper: "https://www.axios.com/"
      title: "Microsoft sets non-profit to cut software related carbon emissions."
      subtitle: "Axios gets you smarter, faster on what matters."
      text: "This is a representation of [additional](https://www.nasa.gov/) field for text, if it is needed. It also has a *full Markdown capability*."
  - component: ShMicroCard
    props:
      urlImage: https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Coca-Cola_logo.svg/1920px-Coca-Cola_logo.svg.png
      urlWrapper: https://www.coca-colacompany.com/
      title: Can't Beat The Real Thing
      subtitle: Slogan used in USA, UK, Ireland & Canada
      text: This slogan Coca-Cola used in 1990s until 1993 when it got changed to Always Coca-Cola
  - component: ShMicroCard
    props:
      urlImage: https://logowik.com/content/uploads/images/apple-black8038.jpg
      ui.image: h-40 w-55
      urlWrapper: https://www.apple.com/
      title: Think Different
      subtitle: Apple
      text: Shows the brand that built over the years using innovation to create its impact on the users.
  - component: ShMicroCard
    props:
      urlImage: https://i.pinimg.com/originals/cb/41/b0/cb41b0abf391e4fd2a8a2f8f91236928.png
      ui.image: h-40 w-55
      urlWrapper: https://rog.asus.com/
      title: Republic of Gamers
      subtitle: For Those Who Dare
      text: ROG makes the best hardware for PC gaming, eSports, and overclocking. Our innovations deliver top performance and premium experiences for everyone.
---
::

You can add images to itas well:

NASA Images

NASA has always told its story through its images, a few of which have become icons of human history.

Here is shown how to add images:

::ShCarousel
---
ui:
  title: text-left
  subtitle: text-left -mb-8
title: NASA Images
subtitle: NASA has always told its story through its images, a few of which have become icons of human history.
items:
  - urlImage: https://images-assets.nasa.gov/image/iss071e403651/iss071e403651~medium.jpg
  - urlImage: https://images-assets.nasa.gov/image/iss071e378497/iss071e378497~medium.jpg
  - urlImage: https://images-assets.nasa.gov/image/iss071e365062/iss071e365062~medium.jpg
  - urlImage: https://images-assets.nasa.gov/image/iss071e378611/iss071e378611~medium.jpg
---
::

Props

These are the properties and attributes associated with the ShCarousel constructor:

Properties and Attributes Description

The ShCarousel constructor represents a carousel component that supports rotating slides, navigation controls, and automatic slide transitions. Below is a detailed description of the properties and attributes used in the ShCarousel constructor.

Config

These style properties can be modified via ui and are stored in the ShCarousel.ts:

export default {
    wrapper: "relative flex items-center w-full mt-10 overflow-hidden",
    title: "text-3xl font-bold text-center dark:text-gray-100",
    subtitle: "text-2xl text-center dark:text-gray-300 -mt-5",
    inner: "flex transition-transform duration-500 ease-in-out",
    image: "w-full h-auto max-h-500 object-cover",
    indicators: "mt-6 w-full text-center",
    icon: "hover:scale-125 duration-300 dark:text-gray-300 dark:hover:text-gray-100",
    // Default Tailwind CSS values
    default: {
    }
  }

Class Descriptions

These represent the class values utilized in the exported object. These values are customizable and can be strengthened or overridden through the ui properties' attributes.

wrapper

• Value: "relative flex items-center w-full mt-10 overflow-hidden"
• Description: Defines the overall container styles. The value "relative flex items-center w-full mt-10 overflow-hidden" sets a relative positioning (relative), uses flexbox layout (flex), centers items (items-center), makes the container full-width (w-full), adds a top margin of 10 units (mt-10), and hides overflow (overflow-hidden).

title

• Value: "text-3xl font-bold text-center dark:text-gray-100"
• Description: Sets the title styles. The value "text-3xl font-bold text-center dark:text-gray-100" makes the text 3xl in size (text-3xl), bold (font-bold), centers the text (text-center), and applies a light gray color in dark mode (dark:text-gray-100).

subtitle

• Value: "text-2xl text-center dark:text-gray-300 -mt-5"
• Description: Sets the subtitle styles. The value "text-2xl text-center dark:text-gray-300 -mt-5" makes the text 2xl in size (text-2xl), centers the text (text-center), applies a medium gray color in dark mode (dark:text-gray-300), and adds a negative top margin of 5 units (-mt-5).

inner

• Value: "flex transition-transform duration-500 ease-in-out"
• Description: Specifies styles for the sliding container. The value "flex transition-transform duration-500 ease-in-out" uses flexbox layout (flex), adds a transition effect for the transform property (transition-transform), with a duration of 500ms (duration-500), and smooth easing (ease-in-out).

image

• Value: "w-full h-auto max-h-500 object-cover"
• Description: Defines styles for the images. The value "w-full h-auto max-h-500 object-cover" stretch to 100% of its container's width, adjust its height automatically, limit its maximum height to 500 pixels, and ensure its content covers the entire area while maintaining its aspect ratio.

indicators

• Value: "mt-6 w-full text-center"
• Description: Defines styles for the indicators (pagination dots). The value "mt-6 w-full text-center" adds a top margin of 6 units (mt-6), makes it full-width (w-full), and centers the text (text-center).

icon

• Value: "hover:scale-125 duration-300 dark:text-gray-300 dark:hover:text-gray-100"
• Description: Defines styles for the navigation icons. The value "hover:scale-125 duration-300 dark:text-gray-300 dark:hover:text-gray-100" scales up the icon on hover (hover:scale-125), with a duration of 300ms (duration-300), sets a medium gray color in dark mode (dark:text-gray-300), and changes to light gray on hover in dark mode (dark:hover:text-gray-100).

default

• Value: {}
• Description: Placeholder for default Tailwind CSS values. This can be used to set any default styles if needed.

These style properties ensure that the ShCarousel is visually appealing and flexible, allowing for a wide range of customization to meet specific design requirements.