Page 19 of 24
Slider
To create a slideset of panels with filters, use the [slider] shortcode. The settings attribute can be used configure the parameters of the slider. See this table for all the available settings options.
| Parameter | Description |
|---|---|
default |
Number of default visible in a slide set |
small |
Number of visible in a slide set at small breakpoint i.e. when viewed on a phone |
medium |
Number of visible in a slide set at medium breakpoint i.e. when viewed on a tablet |
large |
Number of visible in a slide set at large breakpoint i.e. when viewed on a laptop/desktop |
xlarge |
Number of visible in a slide set at extra large breakpoint i.e. when viewed on a large screen |
The slideset allows you to set different filters by using the [slider_filters] shortcode.
markup
[slider_filters] [filter_button style="uk-active" tag=""]All[/filter_button] [filter_button style="uk-active" tag="design"]design[/filter_button] [filter_button style="uk-active" tag="mockup"]mockup[/filter_button] [/slider_filters]
Show code
[slider style="tm-slideset-sandal" settings="default: 1,small: 2,medium: 2,large: 3, xlarge: 3" animation="fade"]
[slider_filters]
[filter_button tag=""]All[/filter_button]
[filter_button tag="design"]design[/filter_button]
[filter_button tag="mockup"]mockup[/filter_button]
[filter_button tag="illustration"]illustration[/filter_button]
[/slider_filters]
[slideset title="Your title" tag="illustration" img="images/demo/gallery/2.jpg" img_width="605" img_height="605" url="#"]Lorem ipsum dolor sit amet, consectetur adipisicing elit[/slideset]
[slideset title="Your title" tag="mockup" img="images/demo/gallery/3.jpg" img_width="605" img_height="605" url="#"]Lorem ipsum dolor sit amet, consectetur adipisicing elit[/slideset]
[slideset title="Your title" tag="illustration" img="images/demo/gallery/4.jpg" img_width="605" img_height="605" url="#"]Lorem ipsum dolor sit amet, consectetur adipisicing elit[/slideset]
[slideset title="Your title" tag="design" img="images/demo/gallery/6.jpg" img_width="605" img_height="605" url="#"]Lorem ipsum dolor sit amet, consectetur adipisicing elit[/slideset]
[/slider]