WidgetHeroSlider

This component uses Swiper Element (WebComponent)

https://

Default Slide

Lorem ipsum dolor sit amet, consectetur adipisicing elit dolor sit amet, consectetur adipisicing elit.

Read Detail

Custom CSS classes

Lorem ipsum dolor sit amet, consectetur adipisicing elit dolor sit amet, consectetur adipisicing elit

Next

~/assets/images/800x800.svg

Without Action Button

Lorem ipsum dolor sit amet, consectetur adipisicing elit dolor sit amet, consectetur adipisicing elit.

---
import { WidgetHeroSlider } from '@yatoday/astro-ui/astro';
---

<WidgetHeroSlider
  items={[
    {
      title: 'Default Slide',
      description: 'Lorem ipsum dolor sit amet, consectetur...',
      image: {
        src: '~/assets/images/800x800.svg',
        alt: 'Lorem Ipsum',
      },
      callToAction: {
        variant: 'primary',
        text: 'Read Detail',
        href: '#',
      },
    },
    {
      title: 'Custom CSS classes',
      description: 'Lorem ipsum dolor sit amet, consectetur ...',
      image: 'https://placehold.co/800x600?text=Slide+2',
      classes: {
        container: 'rounded-3xl h-72 bg-linear-to-r/srgb from-gray-900 to-gray-600',
        image: '',
        title: 'font-bold uppercase bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent',
        description: 'text-zinc-300',
      },
      callToAction: {
        variant: 'primary',
        text: 'Next',
        href: '#',
      },
      class: 'bg-purple-800',
    },
    {
      title: 'Without Action Button',
      description: 'Lorem ipsum dolor sit amet, consectetur...',
      image: {
        src: 'https://placehold.co/800x600?text=Slide+3',
        alt: 'Lorem Ipsum',
      },
    },
  ]}
/>

<!-- With background -->
<WidgetHeroSlider items={[]}>
  <!-- Background container -->
  <Fragment slot="bg">
    <div class="absolute inset-0 bg-primary/10 dark:bg-card"></div>
  </Fragment>
</WidgetHeroSlider>

Props