Skip to main content

Art Slider

The Art Slider Widget allows you to create beautiful and dynamic image slideshows with titles, descriptions, buttons, and animation effects. It’s perfect for showcasing banners, featured content, or creative artwork on your Joomla site.

Pro Feature

This widget is available in the Astroid Pro version only. If you are using the free version, consider upgrading to access this feature.

🚀 How to Add the Widget​

  1. Open your Template Layout in the Astroid backend.
  2. Click Add Widget where you want the slider to appear.
  3. Choose Art Slider from the widget list.
  4. Save the layout and start customizing the widget settings.

🖼 Slide Management​

In the Slides section, click Add Item to insert a new slide.

Each slide can include:

FieldDescription
ImageChoose the image to show
TitleMain heading of the slide
MetaSmall text like category or date
DescriptionA short summary or introduction
LinkURL to redirect when clicked
Link TitleButton text (e.g., "Read More")
Link TargetOpen in same tab or new window

You can add multiple slides to create a full slideshow.

🌀 Slideshow Options​

In the Slideshow Options group:

  • Slider Height: Set the height using vh or px
  • Minimum Height: Useful for responsive display
  • Effect Type: Choose slide animations (e.g., Theater, Slide, Flip, Gallery, etc.)
  • Autoplay: Enable/disable automatic slide transitions
  • Interval: Time delay between slides (in seconds)
  • Controls: Show/hide navigation arrows
  • Indicators: Show/hide bottom dots

🧩 Style & Effects​

🔘 Border & Shadow​

  • Slide Border Radius: Rounded, Square, Circle, Pill
  • Box Shadow: Add depth with regular or hover shadows

🎨 Overlay Settings​

  • Overlay Type: Color or gradient background overlay
  • Overlay Position: Align content (center, top-left, bottom-right, etc.)
  • Overlay Text Color: Light or dark based on image
  • Overlay Padding: Adjust spacing or use custom values

📝 Text Styling​

Customize how the text looks:

  • Title Font Style: Choose font, size, weight, etc.
  • Meta Style: Customize font and position (before or after title)
  • Description Style: Control typography of the body text

🔗 Read More Button​

You can enable a button for each slide:

  • Style: Bootstrap styles (primary, success, warning…)
  • Size: Large, Small, or Default
  • Shape: Rounded, Square, or Pill-style

📍 Display Rules​

Under Assignment Settings:

  • Show the widget on all pages
  • Show on specific menu items
  • Hide on all pages if not in use

✅ Save & Preview​

Once you’re done:

  1. Click Save in the Layout editor.
  2. Open your website frontend to see the slider in action.

💡 Pro Tips​

  • Use high-quality images for better visual results.
  • Keep titles short and descriptions clear.
  • Limit animation effects to keep the experience smooth.