Loading...

Documentation Plugin

bS Swiper

Registers and initializes swiper.js to show posts, child pages, custom post types or products in a 4 (desktop), 3 (large), 2 (medium) and 1 (mobile) column cards, a hero-slider or a hero-fader by shortcode.

Installation

  1. Download Plugin
  2. In your admin panel, go to Plugins > and click the Add New button.
  3. Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
  4. Click Activate to use your new Plugin right away.

Usage

Select template you want to use by replacing bs-swiper-* placeholder in shortcode examples.

  • bs-swiper-card shows items in 4 (xxl), 3 (lg), 2 (md) and 1 (sm) column cards.
  • bs-swiper-card-autoplay 5.1.0.7 shows items in 4 (xxl), 3 (lg), 2 (md) and 1 (sm) column cards with autoplay.
  • bs-swiper-card-product shows WooCommerce products in 4 (xxl), 3 (lg), 2 (md) and 1 (sm) column cards.
  • bs-swiper-hero shows items in a hero-slider with auto-slide effect. Items must have a featured-image.
  • bs-swiper-hero-fade shows items in a hero-slider with auto-fade effect. Items must have a featured-image.

1200x900-dark

Equal Height

Swiper Post 1

Just another post to demonstrate the swiper hero

Read more »
1200x900-dark

Equal Height

Swiper Post 2

Just another post to demonstrate the swiper hero

Read more »
1200x900-dark

Equal Height

Swiper Post 3

Just another post to demonstrate the swiper hero

Read more »
1200x900-dark

Equal Height

Swiper Post 4

Just another post to demonstrate the swiper hero

Read more »

1200x900-dark

Equal Height

Swiper Post 1

Just another post to demonstrate the swiper hero

Read more »
1200x900-dark

Equal Height

Swiper Post 2

Just another post to demonstrate the swiper hero

Read more »
1200x900-dark

Equal Height

Swiper Post 3

Just another post to demonstrate the swiper hero

Read more »
1200x900-dark

Equal Height

Swiper Post 4

Just another post to demonstrate the swiper hero

Read more »

Posts

Posts by category

[bs-swiper-* type="post" category="cars, boats" order="ASC" orderby="date" posts="6"]
Options
  • category: category-slug, multiple categories separated by comma
  • order: ASC or DESC
  • orderby: date, title, or rand
  • posts: amount of posts to show

Posts by tags

[bs-swiper-* type="post" tax="post_tag" terms="bikes, motorbikes" order="DESC" orderby="date" posts="5"]
Options
  • tax: taxonomy (post_tag)
  • terms: tags-slug, multiple terms separated by comma
  • order: ASC or DESC
  • orderby: date, title, or rand
  • posts: amount of posts to show

Single-posts by id

[bs-swiper-* type="post" id="1, 15"]
Options
  • id: id of post, multiple ids separated by comma

Pages

Child-pages by parent-page id

[bs-swiper-* type="page" post_parent="21" order="ASC" orderby="title" posts="6"]

Showing child-pages in parent-page is very useful to avoid empty parent-pages.

Options
  • post_parent: id of parent page
  • order: ASC or DESC
  • orderby: date, title, or rand
  • posts: amount of pages to show

Single-pages by id

[bs-swiper-* type="page" id="2, 25"]
Options
  • id: id of page, multiple ids separated by comma

Custom Post Types

Cpt by terms

[bs-swiper-* type="isotope" tax="isotope_category" terms="dogs, cats" order="DESC" orderby="date" posts="5"]
Options:
  • type: type of custom-post-type
  • tax: taxonomy
  • terms: terms-slug, multiple terms separated by comma
  • order: ASC or DESC
  • orderby: date, title, or rand
  • posts: amount of custom post types to show