Image Slider

The Image Slider plugin for Confluence lets you display multiple images in a simple image slider.

Includes:

  • Image Slider macro
    Use the Image Slider macro to display multiple images in a simple and beautiful image slider.
  • Gallery Slider macro
    Use the Gallery Slider macro to display an image gallery with thumbnail navigation.
  • Content Slider macro
    Use the Content Slider macro to slide through page content like text, links or even charts instead of just images.
Note: All macros are fully responsive, mobile compatible, touch-enabled and support keyboard navigation.

Feature Highlights:

  • Display all image attachments of a wiki page in a beautiful image slider.
  • Collect images from multiple pages or blog posts by label, even from different spaces.
  • Use attachment comments as image captions.
  • Link images to the pages or blog posts they are attached to, e.g. to create a blogpost teaser on your dashboard.
  • Enable responsive width to let the slider adapt to the available space automatically.
  • Choose from multiple different transition effects.

Screenshots

Image Slider Macro

Use the Image Slider macro on a page to display all the image attachments of the current page in a nice looking image slider. You can also specify a label to collect attachments from multiple pages or blogposts, even from different spaces.

Use attachment comments as image captions to display more information in the image slider. You can even link the images to the pages or blogposts they are attached to, e.g. to create a nice blogpost teaser on your dashboard. There are also multiple transition effects you can choose from and lots of configuration options like responsive width, different navigation types, slide numbers, etc. to adjust the image slider to your needs.

Tip: Make sure all images are of the same size. If the images have different sizes, the image slider will use the size of the smallest image for all images.

Parameters

ParameterDefaultDescription
Width
width
None - size of the smallest image will be usedWidth of the slider in pixels. Leave blank to let the slider automatically choose the best size.
Responsive Width
responsiveWidth
falseEnable to let the slider adapt to the available space. This will override any custom width.
Height
height
None - size of the smallest image will be usedHeight of the slider in pixels. Leave blank to let the slider automatically choose the best size.
Attachment Labels
label
None - images of current page will be displayedFilter images by one or more attachment labels. Leave blank to use images attached to current page. Example: blue,green,-red will display all images with labels blue or green, excluding those labeled red.
Spaces
spaces
None - if any label is specified, images from all spaces will be displayedComma separated list of space keys to restrict searching of images, if any label is specified. Use @self for current space. Leave blank for all spaces.
Pages
pages
None - if any label is specified, images from all pages will be displayed, otherwise images of current page will be displayedComma separated list of pages to restrict searching of images. Use @self for current page. To specify a page in a different space, use the following syntax: SPACEKEY:Page Title
Sort Order
sort
creationDateThe order the images should be sorted by. Valid values are:
  • creationDate - Sort by creation date of attachment.
  • fileName - Sort by file name of attachment.
  • comment - Sort by attachment comment.
  • pageTitle - Sort by title of page, where the attachment is attached to.
  • pageCreationDate - Sort by creation date of page, where the attachment is attached to.
  • pageModificationDate - Sort by last modification date of page, where the attachment is attached to.
Reverse Order
reverseSort
falseEnable for reverse ordering.
Max Images
maxResults
None - no limitMaximum number of images to be displayed. Leave blank for no limit.
Comment Usage
commentUsage
captionChoose whether attachment comments should be used as image captions or external links. Valid values are:
  • caption - Comments are displayed as captions, if captions are enabled.
  • link - Comments are used as external links, if links are enabled.
  • captionAndLink - Comments are used as captions and external links. Use a vertical bar "|" in the comment to separate the caption from the link.
    Example: Caption|http://xyz.com
Show Captions
showCaptions
alwaysChoose whether you want to display attachment comments as image captions in the slider. Comment usage has to be set to "caption" or "captionAndLink". Valid values are:
  • always - Always display image captions.
  • onHover - Display image captions only on hover.
  • never - Never display image captions.
Enable Links
enableLinks
falseEnable to link the images to the pages or blogposts where they are attached to. To link to external urls set comment usage to "link" and specify the url in the attachment comment field.
Open Links in new Window
openLinksInNewWindow
trueChoose whether to open links in the same or in a new window, if image links are enabled.
Image Fitting
imageFitting
stretchChoose whether images should be stretched to fit or scaled from the center and cropped to fit. Valid values are:
  • stretch - Stretch images to fit slider.
  • scaleAndCrop - Scale width of images from the center to fit slider, then crop height accordingly.
Effect
effect
fadeChoose between multiple transition effects. Valid values are:
  • fade
  • horizontal-push
  • horizontal-slide
  • vertical-push
  • vertical-slide
Auto Slide
autoSlide
trueEnable to automatically slide through images.
Display Time
delay
3000Time (ms) how long each image will be shown.
Pause on Hover
pauseOnHover
trueEnable to stop animation while hovering over the image.
Show Timer
showTimer
falseEnable to show slide countdown timer, if auto slide is enabled. Not supported in Internet Explorer.
Reset Timer on Click
resetTimerOnClick
falseEnable to reset timer on click, if auto slide is enabled.
Show Navigation
showNavigation
onHoverChoose to show prev/next navigation:
  • always - Always display prev/next navigation.
  • onHover - Display prev/next navigation only on hover.
  • never - Hide prev/next navigation.
Show Bullets
showBullets
alwaysChoose to show navigation bullets below the slider:
  • always - Always display navigation bullets below the slider.
  • never - Hide navigation bullets.
Show Slide Numbers
showSlideNumbers
falseEnable to show slide numbers.

Use the Gallery Slider macro to display an image gallery with thumbnail navigation.

Parameters

ParameterDefaultDescription
Width
width
600Width of the slider in pixels.
Responsive Width
responsiveWidth
falseEnable to let the slider adapt to the available space. This will override any custom width.
Height
height
400Height of the slider in pixels.
Attachment Labels
label
None - images of current page will be displayedFilter images by one or more attachment labels. Leave blank to use images attached to current page. Example: blue,green,-red will display all images with labels blue or green, excluding those labeled red.
Spaces
spaces
None - if any label is specified, images from all spaces will be displayedComma separated list of space keys to restrict searching of images, if any label is specified. Use @self for current space. Leave blank for all spaces.
Pages
pages
None - if any label is specified, images from all pages will be displayed, otherwise images of current page will be displayedComma separated list of pages to restrict searching of images. Use @self for current page. To specify a page in a different space, use the following syntax: SPACEKEY:Page Title
Sort Order
sort
creationDateThe order the images should be sorted by. Valid values are:
  • creationDate - Sort by creation date of attachment.
  • fileName - Sort by file name of attachment.
  • comment - Sort by attachment comment.
  • pageTitle - Sort by title of page, where the attachment is attached to.
  • pageCreationDate - Sort by creation date of page, where the attachment is attached to.
  • pageModificationDate - Sort by last modification date of page, where the attachment is attached to.
Reverse Order
reverseSort
falseEnable for reverse ordering.
Max Images
maxResults
None - no limitMaximum number of images to be displayed. Leave blank for no limit.
Comment Usage
commentUsage
captionChoose whether attachment comments should be used as image captions or external links. Valid values are:
  • caption - Comments are displayed as captions, if captions are enabled.
  • link - Comments are used as external links, if links are enabled.
  • captionAndLink - Comments are used as captions and external links. Use a vertical bar "|" in the comment to separate the caption from the link.
    Example: Caption|http://xyz.com
Show Captions
showCaptions
trueEnable to display attachment comments as image captions in slider. Comment usage has to be set to "caption".
Toggle Captions
toggleCaptions
trueChoose whether you want to display image captions permanently or allow users to toggle them.
Enable Links
enableLinks
falseEnable to link the images to the pages or blogposts where they are attached to. To link to external urls set comment usage to "link" and specify the url in the attachment comment field.
Open Links in new Window
openLinksInNewWindow
trueChoose whether to open links in the same or in a new window, if image links are enabled.
Effect
effect
fadeChoose between multiple transition effects. Valid values are:
  • fade
  • flash
  • pulse
  • slide
  • fadeslide
Auto Slide
autoSlide
trueEnable to automatically slide through images.
Display Time
delay
5000Time (ms) how long each image will be shown.
Stop on Interaction
stopOnInteraction
trueStop playback when user has clicked on thumbnail or navigation, if auto slide is enabled.
Background Color
backgroundColor
blackBackground color of the content slider. Use hexadecimal notation or HTML color name.
Show Navigation
showNavigation
trueChoose to show prev/next navigation.
Show Slide Numbers
showSlideNumbers
trueEnable to show slide numbers.

Content Slider Macro

Use the content slider macro to slide through page content like text, links or even charts instead of just images. Whether you want to create interactive step-by-step guides or just a simple news ticker, it's now possible with the content slider macro.

Place as many entries as you want inside a content slider macro block by using the content slider entry macro:

Content Slider Macros

Parameters

ParameterDefaultDescription
Width
width
500Width of the content slider in pixels.
Responsive Width
responsiveWidth
falseEnable to let the content slider adapt to the available space. This will override any custom width.
Height
height
None - height will be determined by aspect ratioHeight of the content slider in pixels. Leave blank to use aspect ratio instead.
Aspect Ratio
aspectRatio
16x9Choose your desired aspect ratio. Valid values are:
  • 16x9
  • 4x3
Background Color
backgroundColor
whiteSmokeBackground color of the content slider. Use hexadecimal notation or HTML color name.
Effect
effect
fadeChoose between multiple transition effects. Valid values are:
  • fade
  • horizontal-push
  • horizontal-slide
  • vertical-push
  • vertical-slide
Auto Slide
autoSlide
trueEnable to automatically slide through content entries.
Display Time
delay
3000Time (ms) how long each slide will be shown.
Pause on Hover
pauseOnHover
trueStop animation while hovering, if auto slide is enabled.
Show Timer
showTimer
falseEnable to show slide countdown timer, if auto slide is enabled. Not supported in Internet Explorer.
Reset Timer on Click
resetTimerOnClick
falseEnable to reset timer on click, if auto slide is enabled.
Show Navigation
showNavigation
onHoverChoose to show prev/next navigation:
  • always - Always display prev/next navigation.
  • onHover - Display prev/next navigation only on hover.
  • never - Hide prev/next navigation.
Show Bullets
showBullets
alwaysChoose to show navigation bullets below the slider:
  • always - Always display navigation bullets below the slider.
  • never - Hide navigation bullets.
Show Slide Numbers
showSlideNumbers
falseEnable to show slide numbers.
Content Padding
contentPadding
trueEnable to add padding to slide content.