Paragraph Bundle Slideshow

This bundle is designed to offer a robust and customizable slideshow feature, leveraging Drupal core modules like Media, Media Library, and Responsive Image Style. This bundle is intuitively structured with two primary user interface tabs: Display and Content. Each tab is equipped with a set of fields that provide extensive control over both the appearance and functionality of the slideshow.

Display Tab

The Display tab focuses on the visual and interactive aspects of the slideshow. It includes a variety of fields that allow for detailed customization:

1. 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.
2. 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!
3. 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.
4. 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.
5. Border Color: This option lets you choose a color for a thin line that surrounds your paragraph, like framing a picture.
6. 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.
7. 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.
8. 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.
9. 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.
10. 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.
11. 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.
12. 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.
13. 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.

Additionally, there are five fields specifically for managing the slideshow's behavior and appearance:

Features

• Automatic Height Adjustment — Each slide can have different content, and the slideshow resizes dynamically to match the active slide.
• Play/Pause Button — Allows users to pause autoplay and browse manually.
• Custom Slide Timing — Set a time between 3 to 15 seconds for automatic transitions, or disable autoplay entirely.
• Navigation Options — Choose between dots or numbered navigation, depending on your design needs.
• Middle Arrows Support — Enable or hide prev/next arrows centered on the slideshow.
• Active Slide Highlight — Apply a distinct style to the active slide, enhancing visibility.
• Hover Pause — Autoplay pauses when users hover over the slideshow.
• Touch & Swipe Navigation — Fully mobile-friendly, allowing swipe gestures to change slides.
• Keyboard Navigation — Arrow keys move between slides, spacebar toggles play/pause.
• Focus & Accessibility Ready — Each slide properly manages focus, aria-hidden, and tabindex, ensuring screen reader users only interact with the visible slide.
• Live Announcements — Every slide change is announced for assistive technologies, enhancing accessibility.
• Pause on Tab Switch — Autoplay pauses if the user switches to a different tab and resumes when they return.
• Reduced Motion Support — Automatically respects users’ prefers-reduced-motion preference by disabling autoplay and animations if desired.
• Responsive Image Handling — Leverages Responsive Image Styles to ensure slides look great across devices and screen sizes.

Content Tab

The Content tab is where the actual content of the slideshow is managed. It includes:

1. Title Field: For entering the hero title of the slideshow.
2. Slideshow Body:
   • This is a paragraph field designed to add another paragraph bundle named "Slideshow Section," which is the default selection.
   • The slideshow body can host either an image or a text bundle, providing flexibility in the type of content displayed.

Integration with Drupal Core Modules

• Media and Media Library: These modules are utilized for managing and organizing media assets in the slideshow, ensuring easy access and integration of images or videos.
• Responsive Image Style: Ensures that the slideshow images are responsive and adapt well to different screen sizes, enhancing the user experience across various devices.

User Experience and Functionality

The well-structured UI with Display and Content tabs makes the slideshow paragraph bundle user-friendly and intuitive. Users can effortlessly customize the slideshow's appearance and behavior, making it suitable for various website themes and purposes. The integration with core Drupal modules enhances its functionality and ensures seamless media management and responsive design.

Overall, this paragraph bundle provides Drupal users with a powerful tool to create visually appealing and highly customizable slideshows, enriching the content delivery and user engagement on their websites.