Search code examples
reactjsspfxfluent-ui

Image SPFx control with Hyperlink and OnClick

There are many examples of Carousel implementations and I've implemented React slick slider with Fluent UI Image control using the sample from PnP. I have a requirement to add a URL to an image in the slider which will take the user to the target OnClick. The Image Fluent UI control does not have this method and I'm looking for suggestions to implement that in SPFx.

Thanks in advance.

Solution

  • Have you tried this? https://pnp.github.io/sp-dev-fx-controls-react/controls/Carousel.html

    This react component for carousel items has property:

    url:    string  - URL to be opened when clicking on details
target: "_blank" | "_self"  - Target of the URL to open. Default "_blank"

    Moreover the Carousel has property:

    onSelect    (selectedIndex: number) => void Callback function called when element has been selected in the carousel

    You can trigger opening new tab with url of the Image after onSelect is called.