Image Slide Show in Power BI

Do you have the requirement to display images in your Power BI report? With the HTML VizCreator Flex (old name: HTML & CSS Viewer) custom visual, you can create image slide shows just like you know them from websites. In conclusion, this is a modern way to show images to end-users and it also saves a lot of valuable space.

Create an Image Slide Show in Power BI with the HTML VizCreator Flex visual

Go get started, download the sample report and use it as an example for your own report. The CSS code used for the image slide show can be found in the measures. Simply copy & paste the CSS code into a measure in your report and adjust the code to your needs.

Then, bring your newly created CSS measure to the HTML VizCreator Flex visual's “CSS” placeholder. In your HTML measure, adjust the source URLs of your images and drag and drop your HTML measure to the visual’s “HTML” placeholder. For the best result, try to use images with the same width and height.

Technical Background

For the Image Slide Show in Power BI we create a viewing window as a HTML div, where the selected image is displayed. All images are seamless and sidewise aligned. Just the selected image is displayed in the viewing window. Thus, the others are behind the scenes. By changing the selection, the image composition is moved accordingly with a slide effect. Thanks to slider markers (HTML span) and slider position links (HTML a href #) the visual knows exactly where to slide the image composition when selecting another image. In addition, you may change the transition time to your liking (transition, -o-transition, -moz-transition, -webkit-transition).

Always wanted to know how to embed videos in a Power BI report?