Adding Slick Carousel To Your AngularJS WordPress Theme

  • 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:

    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.

  • We’ll also add an extra CSS file comes with Slick carousel in line 28.
  • 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:

    You can download the complete project files from the GitHub repo of the 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.

@n3rdh4ck3r: Adding Slick Carousel To Your AngularJS WordPress Theme via @1fixdotio

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:

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.

to do so, or you can download all of them separately of course.

, then let’s enqueue them into our WordPress theme.

action.

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

 in line 39, so we can make the media query work in WP REST API.

 object when there are more than one attached files.

, from line 2 to 6, the code is added to display our Slick carousel.

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:

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.

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?

Adding Slick Carousel To Your AngularJS WordPress Theme

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.