Slider shortcode integrates Swiper slider allowing to add carousels and slides into post content. On AMP pages amp-carousel is used to produce a similar result, how ever different transition effects and pagination types can not be replicated.

[slider] shortcode arguments
loop:
Set to "true" to loop slides.
direction:
Slides direction [horizontal|vertical] (default: horizontal).
effect:
Slides transition effect [slide|fade|cube|coverflow|flip] (default: slide).
speed:
Duration of transition between slides (in ms) (default: 300).
autoplay:
Delay between transitions (in ms). If this parameter is 0, auto play will be disabled (default: 0).
autoplay_stop_on_last:
Stop autoplay when last slide is reached (default: false).
autoplay_disable_on_interaction:
Stop autoplay when user interacts with the slider (default: true).
navigation:
Set to "true" to show navigation arrows.
pagination:
Pagination type to show [none|bullets|fraction|progress] (default: none).
pagination_clickable:
Set to "true" to enable clicking on pagination button to transition to appropriate slide (bullets only) (default: false).
scrollbar:
Set to "true" to show scrollbar.
width:
Manually specify a width for the slider (px).
height:
Manually specify a height for the slider (px).
auto_height:
Set to "true" for the slider wrapper to adopt its height to the height of the currently active slide.
amp_height:
Manually specify a height for for the slider on AMP pages (px) (default: 320).
color:
Custom color for slider controls (hex).
space_between:
Distance between slides (px) (default: 16).
slides_per_view:
Number of slides per view (slides visible at the same time in slider's container).
slides_per_column:
Number of slides per column, for multirow layout.
slides_per_column_fill:
Defines how slides should fill rows [column|row].
slides_per_group:
Set numbers of slides to define and enable group sliding.
centered_slides:
If true, then active slide will be centered, not always on the left side (default: false).
slides_offset_before:
Additional slide offset in the beginning of the container (before all slides) (px).
slides_offset_after:
Additional slide offset in the end of the container (after all slides) (px).
grab_cursor:
Set to "true" to show grab cursor when hovering the slider (default: false).
free_mode:
If true, then slides will not have fixed positions (default: false).
mousewheel_control:
Set to "true" to enable navigation through slides using mouse wheel (default: false).
keyboard_control:
Set to "true" to enable navigation through slides using arrow keys (default: false).
a11y:
Set to "false" to disable keyboard accessibility that provides focusable navigation buttons and basic ARIA for screen readers (default: true).
config:
Custom JavaScript object compatible with Swiper API (default: {}).
Slider

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

<slider>
  <slide>
    <segment large red center aligned very padded>
      <lorem short>
    </segment>
  </slide>
  <slide>
    <segment large green center aligned very padded>
      <lorem short>
    </segment>
  </slide>
  <slide>
    <segment large blue center aligned very padded>
      <lorem short>
    </segment>
  </slide>
</slider>
<slider loop="true" slides_per_view="5" height="150">
  <slide><image src="//placehold.it/150x150.png"></slide>
  <slide><image src="//placehold.it/150x150.png"></slide>
  <slide><image src="//placehold.it/150x150.png"></slide>
  <slide><image src="//placehold.it/150x150.png"></slide>
  <slide><image src="//placehold.it/150x150.png"></slide>
  <slide><image src="//placehold.it/150x150.png"></slide>
  <slide><image src="//placehold.it/150x150.png"></slide>
</slider>
Multi row slides
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
<slider slides_per_view="3" slides_per_column="2" amp_height="75">
  <slide><segment center aligned padded>Slide 1</segment></slide>
  <slide><segment center aligned padded>Slide 2</segment></slide>
  <slide><segment center aligned padded>Slide 3</segment></slide>
  <slide><segment center aligned padded>Slide 4</segment></slide>
  <slide><segment center aligned padded>Slide 5</segment></slide>
  <slide><segment center aligned padded>Slide 6</segment></slide>
  <slide><segment center aligned padded>Slide 7</segment></slide>
  <slide><segment center aligned padded>Slide 8</segment></slide>
  <slide><segment center aligned padded>Slide 9</segment></slide>
  <slide><segment center aligned padded>Slide 10</segment></slide>
  <slide><segment center aligned padded>Slide 11</segment></slide>
  <slide><segment center aligned padded>Slide 12</segment></slide>
</slider>
Grab cursor

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe
<slider grab_cursor="true">
  <slide>
    <testimonial red name="John Doe"><lorem short></testimonial>
  </slide>
  <slide>
    <testimonial green name="John Doe"><lorem short></testimonial>
  </slide>
  <slide>
    <testimonial blue name="John Doe"><lorem short></testimonial>
  </slide>
</slider>
Custom dimensions

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe
<slider width="500" height="220" pagination="fraction">
  <slide>
    <testimonial red name="John Doe"><lorem short></testimonial>
  </slide>
  <slide>
    <testimonial green name="John Doe"><lorem short></testimonial>
  </slide>
  <slide>
    <testimonial blue name="John Doe"><lorem short></testimonial>
  </slide>
</slider>
Notes
By default, height attribute will also count as amp_height attribute, unless specified directly.
Vertical slider

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe
<slider direction="vertical" height="144" amp_height="210" pagination="bullets" pagination_clickable="true" style="padding-right:36px">
  <slide>
    <testimonial red name="John Doe"><lorem short></testimonial>
  </slide>
  <slide>
    <testimonial green name="John Doe"><lorem short></testimonial>
  </slide>
  <slide>
    <testimonial blue name="John Doe"><lorem short></testimonial>
  </slide>
</slider>
Notes
Vertical slider needs a height parameter.
Autoplay

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe
<slider autoplay="5000">
  <slide>
    <testimonial red name="John Doe"><lorem short></testimonial>
  </slide>
  <slide>
    <testimonial green name="John Doe"><lorem short></testimonial>
  </slide>
  <slide>
    <testimonial blue name="John Doe"><lorem short></testimonial>
  </slide>
</slider>
Transition effects
Placeholder image
Placeholder image
Placeholder image
Placeholder image
Placeholder image
Placeholder image
Placeholder image
Placeholder image
<grid two column stackable>
  <column>
    <slider 
      effect="cube" 
      loop="true" 
      autoplay="3000" 
      autoplay_disable_on_interaction="false" 
      speed="1000" 
      grab_cursor="true" 
      width="320"
    >
      <slide><image src="//placehold.it/320x320.png"></slide>
      <slide><image src="//placehold.it/320x320.png"></slide>
      <slide><image src="//placehold.it/320x320.png"></slide>
      <slide><image src="//placehold.it/320x320.png"></slide>
    </slider>
  </column>
  <column>
    <slider 
      effect="cube" 
      direction="vertical" 
      loop="true" 
      autoplay="3000" 
      autoplay_disable_on_interaction="false" 
      speed="1000" 
      grab_cursor="true" 
      width="320" 
      height="320"
    >
      <slide><image src="//placehold.it/320x320.png"></slide>
      <slide><image src="//placehold.it/320x320.png"></slide>
      <slide><image src="//placehold.it/320x320.png"></slide>
      <slide><image src="//placehold.it/320x320.png"></slide>
    </slider>
  </column>
</grid>
Custom color for controls

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

John Doe
<slider color="#1b1c1d" navigation="true" pagination="bullets" pagination_clickable="true" style="padding:5em">
  <slide>
    <testimonial red name="John Doe"><lorem short></testimonial>
  </slide>
  <slide>
    <testimonial green name="John Doe"><lorem short></testimonial>
  </slide>
  <slide>
    <testimonial blue name="John Doe"><lorem short></testimonial>
  </slide>
</slider>
<slider navigation="true">
  <gallery ids="1195,1194,1157,1161,1164" link="file" size="medium" classes="medium center aligned zoomable">
</slider>
<slider effect="flip" loop="true" navigation="true" autoplay="3000" speed="1000" grab_cursor="true" width="420" amp_height="480">
  <slide><product id="67"></slide>
  <slide><product id="83"></slide>
</slider>
<slider slides_per_view="3" free_mode="true" scrollbar="true" amp_height="480" style="padding-bottom:1em">
  <slide><product id="99"></slide>
  <slide><product id="96"></slide>
  <slide><product id="90"></slide>
  <slide><product id="87"></slide>
  <slide><product id="76"></slide>
  <slide><product id="73"></slide>
  <slide><product id="70"></slide>
  <slide><product id="60"></slide>
  <slide><product id="56"></slide>
</slider>
Auto height
Placeholder image
Placeholder image
Placeholder image
Placeholder image
Placeholder image
Placeholder image
Placeholder image
<slider auto_height="true" navigation="true">
  <slide><image center aligned src="//placehold.it/512x256.png"></slide>
  <slide><image center aligned src="//placehold.it/256x512.png"></slide>
  <slide><image center aligned src="//placehold.it/512x256.png"></slide>
  <slide><image center aligned src="//placehold.it/256x512.png"></slide>
  <slide><image center aligned src="//placehold.it/512x256.png"></slide>
  <slide><image center aligned src="//placehold.it/256x512.png"></slide>
  <slide><image center aligned src="//placehold.it/512x256.png"></slide>
</slider>
Custom configuration object
Slide 1
Slide 2
Slide 3
<slider config="
  {
    slidesPerView: 3,
    breakpoints: {
      425: {
        slidesPerView: 1,
        spaceBetween: 10,
      },
      1024: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
    },
  }
">
  <slide>
    <segment big red center aligned very padded>Slide 1</segment>
  </slide>
  <slide>
    <segment big green center aligned very padded>Slide 2</segment>
  </slide>
  <slide>
    <segment big blue center aligned very padded>Slide 3</segment>
  </slide>
</slider>
Notes
Custom configuration should be a JavaScript object compatible with the Swiper API.

One response to “Slider

Leave a comment

Your email address will not be published. Required fields are marked *