Help:Carousel format

Carousel format
Display results as a carousel
Further Information
Provided by: Extension "Semantic Result Formats"
Added: 4.1.0
Removed: still supported
Requirements: none
Format name: carousel
Enabled? Indicates whether the result format is enabled by default upon installation of the respective extension. yes
Authors: thomas-topway-it for KM-A
Categories: other
Group: group=image , gallery , carousel , interaction
Table of Contents

The result format carousel, part of the Extension "Semantic Result Formats" extension, is a complete porting of the Slick Javascript library for Semantic MediaWiki! 1

The Carousel format allows to explicitly specify a property to be used as image (imageproperty), link (linkproperty), title (titleproperty), and caption (captionproperty) however none of them are required, and they will be automatically inferred depending on the kind of query and retrieved properties (if any).

The Carousel format also supports virtually all parameters of the original Javascript library using the prefix "slick-", then followed by the native option keeping the camelCase form (e.g. slick-autoplaySpeed=7000)


{{#ask: [[File:+]]
|slick-dots= 0

(selects all the images on the wiki within the limit, uses the file page as a link, and displays them without title and caption)

{{#ask: [[Category:Projects]] 

(displays all the images within the category "Projects" corresponding to the property "Image", use the property "Intro" as caption, use some of the available native Slick options)

{{#ask: [[File:+]]
|?Has title
|?Has caption
|titleproperty=Has title
|captionproperty=Has caption
|slick-dots= 1

(selects all the images on the wiki and uses the properties "Has title" and "Has caption" respectively as title and caption, use some of the available native Slick options)

{{#ask: [[File:+]] [[Has caption::+]]
|?Has caption
|slick-dots= 1

(selects all images with the property "Has caption" and uses such property as caption, uses some of the available native Slick options)

(standard carousel on large screens)

(responsive carousel on small screens)


(the description of Slick's native parameters is taken from the original repository)

parameter description type default
width sets carousel width string
height sets carousel height string
class adds additional classes to the widget string
captionproperty property used for caption (can be null) string
titleproperty property used for title (can be null) string
linkproperty property used for link (can be null) string
imageproperty property used for image (can be null) string
slick-accessibility Enables tabbing and arrow key navigation. Unless autoplay: true, sets browser focus to current slide (or first of current slide set, if multiple slidesToShow) after slide change. For full a11y compliance enable focusOnChange in addition to this. boolean true
slick-adaptiveHeight Adapts slider height to the current slide boolean false
slick-arrows Enable Next/Prev arrows boolean true
slick-autoplay Enables auto play of slides boolean true
slick-autoplaySpeed Auto play change interval integer 3000
slick-centerMode Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts. boolean false
slick-centerPadding Side padding when in center mode. (px or %) string 50px
slick-cssEase CSS3 easing string ease
slick-dots Current slide indicator dots boolean false
slick-dotsClass Class for slide indicator dots container string slick-dots
slick-draggable Enables desktop dragging boolean true
slick-easing animate() fallback easing string linear
slick-edgeFriction Resistance when swiping edges of non-infinite carousels float 0.15
slick-fade Enables fade boolean false
slick-focusOnSelect Enable focus on selected element (click) boolean false
slick-focusOnChange Puts focus on slide after change boolean false
slick-infinite Infinite looping boolean true
slick-initialSlide Slide to start on integer 0
slick-lazyLoad Accepts 'ondemand' or 'progressive' for lazy load technique. 'ondemand' will load the image as soon as you slide to it, 'progressive' loads one image after the other when the page loads. string ondemand
slick-mobileFirst Responsive settings use mobile first calculation boolean false
slick-nextArrow Allows you to select a node or customize the HTML for the "Next" arrow. string <button type="button" class="slick-next">Next</button>
slick-pauseOnDotsHover Pauses autoplay when a dot is hovered boolean false
slick-pauseOnFocus Pauses autoplay when slider is focussed boolean true
slick-pauseOnHover Pauses autoplay on hover boolean true
slick-prevArrow Allows you to select a node or customize the HTML for the "Previous" arrow. string <button type="button" class="slick-prev">Previous</button>
slick-respondTo Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two). string window
slick-rows Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row. integer 1
slick-rtl Change the slider's direction to become right-to-left boolean false
slick-slide Slide element query string
slick-slidesPerRow With grid mode initialized via the rows option, this sets how many slides are in each grid row. integer 1
slick-slidesToScroll # of slides to scroll at a time integer 1
slick-slidesToShow # of slides to show at a time integer 1
slick-speed Transition speed integer 300
slick-swipe Enables touch swipe boolean true
slick-swipeToSlide Swipe to slide irrespective of slidesToScroll boolean false
slick-touchMove Enables slide moving with touch boolean true
slick-touchThreshold To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider. integer 5
slick-useCSS Enable/Disable CSS Transitions boolean true
slick-useTransform Enable/Disable CSS Transforms boolean true
slick-variableWidth Disables automatic slide width calculation boolean false
slick-vertical Vertical slide direction boolean false
slick-verticalSwiping Changes swipe direction to vertical boolean false
slick-waitForAnimate Ignores requests to advance the slide while animating boolean true
slick-zIndex Set the zIndex values for slides, useful for IE9 and lower integer 1000



  1. ^  Semantic MediaWiki: GitHub pull request gh:srf:730