[ Mobile / Desktop ] Create SfHero

Designs on Figma

Should use Glidejs to handle slide, take a look on SfGallery or SfCarousel as examples.

Proposed API

Props

{
  /**
   * List of banners:
   * array of nested objects with format: `[{ image, title, subtitle, cta, route }]`
   */
  banners: {
    type: Array,
    required: true
  },
  /**
    * Glide slider options (https://glidejs.com/docs/options/)
    */
  sliderOptions: {
    type: Object,
    default() {
      return {
        type: "slider",
        autoplay: 8000,
        rewind: true
      };
    }
  }
}

On banner object, only image (img src) should be required.

Slots

• default: the content itself, overwriting each banner image, should bind banner object;
• next: next banner icon (arrow right by default), should bind isFirst boolean;
• previous: previous banner icon (arrow left by default), should bind isLast boolean;
• bullets: pagination bullets, should bind total and current (numbers);

Events

this.$emit("click", banner.route);

Please mind that it’s just a proposal. We’re open to discussion regarding component API. 😁

[filrak]

@leomp12 I was just thinking more about copying some styles to have a quicker setup

[leomp12]

@bahdcoder you’re right, thanks! I had forgotten the prop for glidejs options, I’ll edit the issue.