In Genesis Slack chat, a user asked:
Seeking a carousel slider plugin that will work in a widget for the home page of the StudioPress AgentPress Pro theme. Tried a few, searched Google for hours and nothing really fits the bill. It is for a real estate website. Thanks.
The effect I am seeking is found here: https://greenhomesforsale.com/
When it comes to building custom responsive carousels and sliders, what better jQuery solution than Slick?
In this tutorial, we are going to
- drag a Flexible Posts Widget into Home Featured widget area and select 6 (can be any number) Listings to appear with Thumbnails, select a custom
Listings Carouseltemplate which adds Listing price (custom field's value) and excerpt below the image - load CSS and JS for Slick and Font Awesome (for the left and right carousel arrows) on the front page if Home Featured widget area is populated
- initialize Slick on the parent container of the Listings so 3 of them slide at a time
- add CSS to slightly darken the background for a subtle hover effect on the images and to slide reveal listing price and excerpt
Step 1
a) Create a css directory inside the AgentPress Pro theme directory and upload slick.css.
b) Upload slick.min.js to AgentPress Pro's js directory.
Create a file named say, slick-init.js in the same location having this code:
