Swiper is a free mobile touch slider with hardware accelerated transitions and amazing native behavior.
I have switched from Owl and SlickJS to Swiper for custom jQuery sliders and carousels.
This members-only tutorial provides the steps to apply Swiper on Genesis Featured Posts.
We are going to
- register a `home-featured` widget area.
- output `home-featured` widget area and HTML for Swiper's previous and next below the header on the homepage.
- edit Genesis Sample's JS to replace the top margin (equal to the height of fixed site header) assignment from site inner to home featured on the homepage.
- create a init file for Swiper to show 3 slides per view and to slide 3 at a time.
- enqueue (load) Swiper and its init file on the site's front page.
- filter the output of a specific instance of Genesis Featured Posts widget using "Widget Output Filters" plugin to add the classes and pagination needed by Swiper in the markup of the widget.
- add CSS to display our custom Home Featured widget area centered on the page and make other adjustments like moving the arrows to left and right.
While the tutorial has been written for Genesis Sample 2.6.0, it should work with a few adjustments in any Genesis theme.
Step 1
Install and activate Widget Output Filters.
Step 2
Upload swiper.min.css to child theme's css directory (create if not present) and swiper.min.js to child theme's js directory.
Step 3
Create a file named say, swiper-init.js in the child theme's js directory having the following:
