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)

Usage

{{#ask: [[File:+]]
|format=carousel 
|slick-dots= 0
|limit=100
|height=400px
}}

(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]] 
 |?Intro
 |?Image
 |format=carousel
 |height=380px
 |slick-autoplaySpeed=5000
 |class=homepage
}}

(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
|format=carousel 
|slick-dots= 1
|limit=10
|slick-autoplay=0
|slick-autoplaySpeed=5000
|height=400px
|class=my-class
}}

(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
|format=carousel
|slick-dots= 1
|limit=10
|slick-autoplay=0
|height=400px
}}

(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)

Parameters

(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

Demos

• https://fina.knowledge.wiki/FINA