Adding Slick Carousel To Your AngularJS WordPress Theme

Last time we just learned about Getting Attached Media For A Certain Post With REST API, now we should be ready for implementing this technique and fetching all attached images into a slider.

After this quick tutorial, you’ll have a Slick carousel showed in each post, when there are more than one image attached to the post. It will look like the following GIF animation:

Slick Carousel in the post content view

Since this post is in my Building themes with AngularJS and JSON REST API series, please be sure you’ve downloaded the latest project files before we get started.

1. Add Angular Slick to our theme

Angular Slick is an Angular directive for the jQuery Slick carousel plugin. I suggest you install it with bower because all dependencies (jQuery, Slick carousel) will be downloaded with it automatically. You can use the command bower install angular-slick to do so, or you can download all of them separately of course.

After that, you should get three more directories in bower_components, then let’s enqueue them into our WordPress theme.

2. Enqueue all files needed

When you need to enqueue JavaScript or CSS files into your WordPress theme, you can just go to functions.php and update the function you hook into the wp_enqueue_scripts action.

In our project, you need to add the following code. You may find that I’d like to register script files first with wp_register_script, and add them to the dependencies of my-scripts.

We’ll also add an extra CSS file comes with Slick carousel in line 28.

I know there’s a copy of jQuery comes with WordPress, but I had some hiccup when tried to integrate it with Slick carousel. So I enqueued the jQuery library came with Angular Slick when I installed it with bower.

Please be sure you’ve got the filter function hooked into query_vars in line 39, so we can make the media query work in WP REST API.

3. Add Angular Slick to our Angular module. Get all attached media in the Content controller

In line 1, we add the slick directive as a dependency to our Angular module, which is called app.

And in line 12-16, we get all attached media files with the post ID, and we only add the new media property to the $scope object when there are more than one attached files.

4. Display the Slick carousel in post content page

The last step is to update the content.html, from line 2 to 6, the code is added to display our Slick carousel.

  1. Line 2, the slick directive can be passed a lot of options to change the carousel settings. But there are two important attributes when we load the images with ng-repeatinit-onload="true" and data="media". Information about these two attributes can be found from this issue ticket.
  2. Please note the value of the data key should be the property you’ve attached to the $scope object, in our case, it is the media we fetch from WP REST API.
  3. In line 3, I use image.is_image with ng-if to show the div only when the media is an image.

With this quick tutorial, we integrated a third party directive into our Angular WordPress theme, based on the tip we’ve learned from the previous post.

If you’ve followed my series about AngularJS and WordPress for a while, I hope you’ve got the idea about the new approach when getting AngularJS involved with the WordPress theme development:

  1. Add the required AngularJS modules as dependencies in our app (theme).
  2. Enqueue the dependencies.
  3. Add or modify the controllers in our app, in most cases, we used $http service to query objects (posts, media) from WP REST API.
  4. Lastly we often need to update our theme partials (views) to display the content we’ve just manipulated.

You can download the complete project files from the GitHub repo of the theme. I’m looking forward to hearing from you. Any suggestion topics or thoughts to share are very welcome.

15 responses

  1. […] Now you can go try and see if it works for you. In the following posts of my Building themes with AngularJS and JSON REST API series, I’ll be showing how to build a slider with Angular Slick in your WordPress post. So stay tuned! […]

  2. […] note if you integrate Angular Slick into your theme, this trick won’t work anymore. Not sure why I just spotted the issue. Will post solution […]

  3. It’s displaying the attachments from all posts, not from the same post.

    1. Yoren Chang Avatar
      Yoren Chang

      Hmm, it works good at my end. Make sure you’ve added the filter in your functions.php, it’s the crucial part.

    2. that_bman_again Avatar
      that_bman_again

      I think it would be more suited to the main.html page and therefore needs to be added (moved) to the Main controller.

    3. that_bman_again Avatar
      that_bman_again

      I needed to add the slick-theme stylesheet (in functions.php) to get the buttons and dots to appear for the carousel:

      wp_enqueue_style(
      'slick-theme-css',
      get_stylesheet_directory_uri() . '/bower_components/slick-carousel/slick/slick-theme.css'
      );

      1. Yoren Chang Avatar
        Yoren Chang

        Yeah I remember I met some hiccups about the buttons and dots styles, but it worked eventually without the slick-theme.css.

  4. Gabriel Avatar
    Gabriel

    is it possible to use two slider on same view, one with thumbnails as nav for the main slider…??

    1. Yoren Chang Avatar
      Yoren Chang

      I think it’s possible but in such case, slick slider seems not a fit for you.

  5. How does this work with the /slug lookup you did in a previous tutorial?

    1. Yoren Chang Avatar
      Yoren Chang

      Neil,

      I haven’t tested but it should look like this:
      https://gist.github.com/yoren/1df7509a875aa2cd4df5

  6. […] this tutorial “Adding Slick Carousel To Your AngularJS WordPress Theme” I showed you how to grab all image attachments from a post to create a Slick carousel. The […]

  7. Hi, I am trying to implement something similar to the above on my site,
    however im struggling with one thing.
    I have a custom post type and using the carousel to display each custom post type post. I grab all my custom post type data with my angular call, and go through these to get the next and previous posts. However, it is required my URL change, but at the moment this does not happen and am struggling to implement this.
    for example, I go to my post //
    it shows my correct post. I use the carousel to go to the next one, it shows the data for post-2 but the url stays at //

    Have you any ideas or is this something you looked at?

    thanks

    Joe

    1. Yoren Chang Avatar
      Yoren Chang

      Can you add target="_self" to your a tag? I believe that should help (based on my knowledge on AngularJS 1).

  8. […] Adding Slick Carousel To Your AngularJS WordPress Theme […]

Leave a Reply

Your email address will not be published. Required fields are marked *