Updated on March 15, 2020

This members-only tutorial provides the steps to initialize Flickity on the WordPress Galleries to turn them into a responsive carousel/slider.

Backend:

Frontend:

The number of carousel items appearing at any given time can be changed by changing the number of columns in the gallery settings.

Step 1

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site's /wp-content/plugins/my-custom-functionality-master.

Upload flickity.min.css to the plugin's assets/css directory.

Upload flickity.pkgd.min.js to the plugin's assets/js directory.

Create a file named say, flickity-init.js in the above location having the following:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

4 comments on “Carousel/Slider from WordPress Gallery using Flickity”

  1. Hello,
    I’m still trying on another site: https://trofeomalaspina.it/ticino-ecomarathon/

    I’m not going to make the carousel work, I followed the instructions carefully, the only thing I’m not sure I did correctly is step number 2, I didn’t find any advanced settings in wordpress to add the gallery-carousel class, so l ‘I added with oxygen to the gallery element

    in the plugin.php file in my-custom-functionality I modified to use flickity on the homepage and on the page where I want to insert the carousel:

    if ((is_front_page () || is_page (1568))) {
             wp_enqueue_style (‘flickity-css’, plugin_dir_url (FILE). ‘assets / css / flickity.min.css’);
            
             wp_enqueue_script (‘flickity’, plugin_dir_url (FILE). ‘assets / js / flickity.pkgd.min.js’, ”, ‘2.2.1’, true);
             wp_enqueue_script (‘flickity-init’, plugin_dir_url (FILE). ‘assets / js / flickity-init.js’, ”, ‘1.0.0’, true);
         }

    What am I doing wrong?

    1. in the flickity-init.js file you have flickity looking for the class ‘.carousel’ instead of ‘.gallery-carousel’

magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: