Documentation Plugin

bS Swiper

| 21 Comments on 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. Live preview cards, live preview heroes.

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

Cards

Equal Height

Swiper Post 4

/ by Basti

Just another post to demonstrate the swiper hero

Read more »
Equal Height

Swiper Post 3

/ by Basti

Just another post to demonstrate the swiper hero

Read more »
Equal Height

Swiper Post 2

/ by Basti

Just another post to demonstrate the swiper hero

Read more »
Equal Height

Swiper Post 1

/ by Basti

Just another post to demonstrate the swiper hero

Read more »

Posts

[bs-swiper-card type="post" category="equal-height" order="DESC" orderby="date" posts="4"]
Options
  • category: category slug – multiple categories separated by comma
  • order: ASC or DESC
  • orderby: date, title or rand
  • posts: number of posts to display

Child pages

[bs-swiper-card type="page" post_parent="413" order="ASC" orderby="title" posts="24"]
Options
  • post_parent: ID of parent page
  • order: ASC or DESC
  • orderby: date, title or rand
  • posts: number of pages to display

Custom Post Types

[bs-swiper-card type="isotope" tax="isotope_category" cat_parent="111" order="DESC" orderby="date" posts="10"]
Options
  • type: type of custom post type
  • tax: taxonomy of custom post type
  • cat_parent: ID of parent taxonomy
  • orderby: date, title or rand
  • posts: number of pages to display

Products

[bs-swiper-card-product order="DESC" orderby="date" posts="24" category="products"]
Options
  • category: category slug – multiple categories separated by comma
  • order: ASC or DESC
  • orderby: date, title or rand
  • posts: number of posts to display

Heroes

Slide

Equal Height

Swiper Post 4

Just another post to demonstrate the swiper hero

Read more »
Equal Height

Swiper Post 3

Just another post to demonstrate the swiper hero

Read more »
Equal Height

Swiper Post 2

Just another post to demonstrate the swiper hero

Read more »

Fade

Equal Height

Swiper Post 4

Just another post to demonstrate the swiper hero

Read more »
Equal Height

Swiper Post 3

Just another post to demonstrate the swiper hero

Read more »
Equal Height

Swiper Post 2

Just another post to demonstrate the swiper hero

Read more »

Posts

Slide
[bs-swiper-hero type="post" category="equal-height" order="DESC" orderby="date" posts="3"]
Fade
[bs-swiper-hero-fade type="post" category="equal-height" order="DESC" orderby="date" posts="3"]
Options
  • category: category slug – multiple categories separated by comma
  • order: ASC or DESC
  • orderby: date, title or rand
  • posts: number of posts to display

Child pages

Slide
[bs-swiper-hero type="page" post_parent="9247" order="ASC" orderby="name" posts="6"]
Fade
[bs-swiper-hero-fade type="page" post_parent="9247" order="ASC" orderby="name" posts="6"]
Options
  • post_parent: ID of parent page
  • order: ASC or DESC
  • orderby: date, title or rand
  • posts: number of pages to display

Custom Post Types

Slide
[bs-swiper-hero type="isotope" tax="isotope_category" cat_parent="111" order="DESC" orderby="date" posts="10"]
Fade
[bs-swiper-hero-fade type="isotope" tax="isotope_category" cat_parent="111" order="DESC" orderby="date" posts="10"]
Options
  • type: type of custom post type
  • tax: taxonomy of custom post type
  • cat_parent: ID of parent taxonomy
  • orderby: date, title or rand
  • posts: number of pages to display

Overriding templates via theme

Template files can be found within the /bs-swiper-main/templates/ plugin directory.

Edit files in an upgrade-safe way using overrides. Copy the template into a directory within your theme named /bs-swiper-main keeping the same file structure but removing the /templates/ subdirectory. Path must be /your-theme/bs-swiper-main/[file].php.

The copied file will now override the bS Swiper template file. Change cards, classes or HTML as you want.

Templates that can be overwritten:

  • sc-swiper-card.php
  • sc-swiper-card-product.php
  • sc-swiper-hero.php
  • sc-swiper-hero-fade.php

21 Comments on “bS Swiper”

  • Arun Kumar

    says:

    How to Change The Hero Swiper Hight I have tried to edit in hero-swiper template am unable to get what I need

    I need to make hero-swiper height 400 px only please help me

    • Basti

      says:

      Try this

      .heroes {
    height: 400px;
}

.swiper-hero-img {
    object-fit: cover;
    height: 100%;
}

  • Arun Kumar

    says:

    Thank you so much for that code base and how to add an image overlay on swiper.

  • nfgngn cbnbcn

    says:

    Hi,
    when i add short code to page e.g
    [bs-swiper-card type="post" category="equal-height" order="DESC" orderby="date" posts="4"]
    nothing happens..?
    Is there something else i’m missing here?

    Thanks

    • Basti

      says:

      Do you use a category named “equal-height” on your site? Replace that with slug from your category.

  • nfgngn cbnbcn

    says:

    Oh, whoops!? Got it.
    Thanks

  • Andrew

    says:

    Hi,
    how do I find the ID of parent taxonomy? I have [bs-swiper-hero type="job_listing" tax="job_listing_category" cat_parent="39" order="DESC" orderby="date" posts="10"] 39 is the ID of the job listing page..

    Thanks

    • Basti

      says:

      You will find id when you edit taxonomy/category in backend in the URL. For example &tag_ID=116. In this case id is 116.

  • Andrew

    says:

    HI,
    [bs-swiper-hero type="post" category="test" order="DESC" orderby="date" posts="3"]

    Doesn’t work for me with 3 posts with the category of ‘test’ displays nothing…

    Why would this be? any ideas?

    Thanks

    • Basti

      says:

      Please share a link to the site with embed shortcode and a link to one of the posts in this category.

  • Andrew

    says:

    Hi,
    Sorry, working on this locally. Not sure what’s going on there.. the cards work no problem with products (using woocommerce) I thought the problem with the slider may be I’m using wp job manager that has seperate ‘categories’ (custom posts?) Job_listing_category job_listings so I tested it with wp regular categories and posts. Can’t get any of the shortcodes to work: child, custom post, page, post..any ideas? Thanks,
    Andrew

    • Basti

      says:

      We cannot help on local projects. Please transfer site to a live server.

  • Andrew

    says:

    OK, Sorry.
    https://freetowork.co.nz/front/
    [bs-swiper-hero type="job_listing" tax="job_listing_category" cat_parent="39" order="DESC" orderby="date" posts="3"]

    Not sure if I have the ‘type’ and ‘tax’ right here..?

    many thanks!

    • Basti

      says:

      Please create an admin account and send user and password to store(at)bootscore.me

    • Basti

      says:

      Your site is 403. Please make sure that everything is fine 😉

  • Andrew

    says:

    Sorry, was blocking Europe, I guess thats where you are?

    • Basti

      says:

      freetowork.co.nz/swiper-jobs/

      You should use card template. Heroes need a featured image to work and jobs plugin has no featured image.

  • Andrew

    says:

    Oh, o.k. bummer! Hey thanks a lot for checking it out. Much appreciated.
    Cheers

    • Basti

      says:

      You’re welcome 👍

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information