Paragraph Bundle Carousel

The Carousel Paragraph Bundle is an innovative and visually stunning addition to Drupal websites, designed to offer a dynamic and interactive way to display content. This bundle is crafted with a user-friendly interface, comprising two primary tabs: Display and Content, each with a range of customizable fields to fine-tune the carousel's appearance and functionality.

Display Tab:

The Display tab is equipped with an array of settings to ensure your carousel not only functions well but also aligns perfectly with your site's aesthetic:

• Background Color: This option lets you pick a color for the background area of your paragraph. It's like choosing a paint color for the wall behind your text.
• Background Color Hover: This is a fun feature! When you move your mouse cursor over the paragraph, the background color changes to the color you pick here. It's like a magic trick for your paragraph!
• Text Color: Here, you can decide what color the words in your paragraph will be. It's like selecting the ink color for writing your paragraph.
• Text Color Hover: Similar to the background hover, this changes the text color when you hover your mouse over the paragraph. Imagine the text changing color like a chameleon when you move your mouse over it.
• Border Color: This option lets you choose a color for a thin line that surrounds your paragraph, like framing a picture.
• Border Color Hover: When you hover your mouse over the paragraph, the border color changes to what you choose here. It's another way to make your paragraph interactive and eye-catching.
• Border: Here, you can select from 11 different styles for your paragraph's border, like dotted, dashed, or solid lines. It's like picking different styles of frames for a picture.
• Border Radius: This option allows you to round the corners of your paragraph's border. You have 6 styles to choose from, ranging from slightly rounded to completely circular corners.
• Margin: This sets the space between your paragraph and other elements on the page. You can choose from 6 options to determine how much space you want around your paragraph.
• Padding: Padding is the space between your text and the border of the paragraph. This option gives you 8 choices to decide how much space you want inside the border.
• Max Width: This lets you control how wide your paragraph can be. You can choose from 7 different widths in pixels, or set it to 100% which will make the paragraph stretch as wide as its container allows.
• Box Shadow: You have 2 options here to add a shadow effect to your paragraph. This makes it look like your paragraph is slightly raised above the page, giving it some depth.
• Background Color Opacity: This is a slider that lets you adjust how see-through the background color is. Sliding it down makes the background more transparent, allowing whatever is behind it to show through a bit.

Additional Field Descriptions for Carousel Configuration

1. Time in seconds

• What it does: Sets the autoplay interval for slide transitions.
• How it works:
  • Values: 1–15 seconds enable autoplay with a Play/Pause button.
  • Setting to 0 disables autoplay.
  • Example: 13 s means the carousel advances every 13 seconds.

2. Available Breakpoints

• What it does: Defines the screen width breakpoint for responsive layout switching.
• How it works:
  • Common options: 576px, 768px, etc.
  • Used to switch layout or visible item count for small vs. big screens.

3. Carousel Layout

• What it does: Determines slide orientation.
• Options:
  • Horizontal (big & small screens)
  • Vertical (all screens)
  • Hybrid (horizontal on large, vertical on small screens).

4. Navigation

• What it does: Chooses navigation type.
• Options:
  • Arrows
  • Dots
  • Both
  • None

5. Slide Width

• What it does: Sets a fixed width (in px) for each slide for design precision.
• How it works:
  • 0 for auto width.
  • Example: 400 px ensures consistent width across slides.

6. Slide Gap

• What it does: Sets the gap (in px) between slides.
• Example: 16 px will add consistent spacing between slides.

7. Showing Number On Big Screen

• What it does: Sets the maximum number of slides visible simultaneously on large screens.
• Clarification: It is a maximum, with the script dynamically reducing this if the container is too small, ensuring slides fit without overflow.
• Example: 3 means up to 3 slides will be shown on large screens.

8. Showing Number On Small Screen

• What it does: Sets the maximum number of slides visible simultaneously on small screens (below the defined breakpoint).
• Clarification: This is also a maximum, dynamically reduced if needed.
• Example: 1 means one slide will be shown on small screens.

9. Activate Looping

• What it does: Enables continuous looping of the carousel when autoplay is active.
• Condition: Works only if the "Time in seconds" is greater than 0.
• Behavior: When enabled, the carousel loops back to the first slide after the last slide without manual navigation.

Content Tab:

Under the Content tab, you will find the core element of the bundle:

• Paragraph Field: This field allows you to insert any paragraph bundle into the carousel. It’s flexible and compatible with a variety of content types.

Additional customization:

• Touch Swipe Support: Mobile users can swipe left or right to navigate between slides for a natural touch experience.
• Live Announcements: Each slide change is announced to assistive technologies, ensuring screen reader users know which slide is active.
• Pause on Tab Switch: The carousel automatically pauses when the user switches to another browser tab, preserving content visibility when they return.
• Reduced Motion Support: Respects the user's "prefers-reduced-motion" system setting to reduce animations for users who prefer less movement.
• ARIA roles: region, roledescription, aria-labelledby, aria-hidden, tabindex.
• Live region announcer:
  • Announces current visible range (e.g., "Showing slides 4 to 6 of 10").
• Keyboard navigation:
  • Arrow keys, spacebar toggle (autoplay).
  • Focus and inert toggling for screen reader accessibility.

Recommended and Tested Bundles for Carousel Items:

To enhance your carousel, we recommend and have tested the following bundles, ensuring seamless integration and optimal performance:

• 3D Flip Box
• Card Two Columns
• Card Three Columns
• Contact Form
• Drupal Block
• Block Content
• Hero
• Image, Image Wide, Image Narrow
• Image Grid
• Link
• Layout One, Two, or Three Columns
• Simple
• Views
• Webform

Each of these bundles brings its unique flair to the carousel, allowing you to create a truly customized and engaging experience for your website visitors. The Carousel Paragraph Bundle is not only a tool for showcasing content but also a statement piece that elevates the overall design and interactivity of your site.