Skip to content

Instantly share code, notes, and snippets.

@yoren
Last active Dec 4, 2015
Embed
What would you like to do?
Adding Slick Carousel To Your AngularJS WordPress Theme
<h1 ng-bind-html="post.title"></h1>
<slick dots="true" autoplay="true" slides-to-show="1" slides-to-scroll="1" init-onload="true" data="media" style="width:300px">
<div ng-if="image.is_image" ng-repeat="image in media">
<img alt="{{image.title}}" ng-src="{{image.attachment_meta.sizes.medium.url}}" />
</div>
</slick>
<div ng-bind-html="post.content"></div>
<?php
function my_scripts() {
//...
wp_register_script(
'angularjs-slick',
get_stylesheet_directory_uri() . '/bower_components/angular-slick/dist/slick.min.js'
);
wp_register_script(
'slick-carousel',
get_stylesheet_directory_uri() . '/bower_components/slick-carousel/slick/slick.min.js'
);
wp_register_script(
'my-jquery',
get_stylesheet_directory_uri() . '/bower_components/jquery/dist/jquery.min.js'
);
wp_enqueue_script(
'my-scripts',
get_stylesheet_directory_uri() . '/js/scripts.min.js',
array( 'my-jquery', 'angularjs', 'angularjs-route', 'angularjs-sanitize', 'slick-carousel', 'angularjs-slick' )
);
wp_enqueue_style(
'slick-css',
get_stylesheet_directory_uri() . '/bower_components/slick-carousel/slick/slick.css'
);
//...
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
//...
add_filter( 'query_vars', function( $query_vars ) {
$query_vars[] = 'post_parent';
return $query_vars;
});
//...
var app = angular.module('app', ['ngRoute', 'ngSanitize', 'slick']);
//...
//Content controller
app.controller('Content', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
$http.get('wp-json/posts/' + $routeParams.ID).success(function(res){
$scope.post = res;
document.querySelector('title').innerHTML = res.title + ' | AngularJS Demo Theme';
});
$http.get('wp-json/media?filter[post_parent]=' + $routeParams.ID).success(function(res){
if ( res.length > 1 ) {
$scope.media = res;
}
});
}]);
//...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment