I am trying to implement animations as mentioned in below post:
https://www.splunk.com/blog/2017/04/25/animate-simplexml-dashboard-elements-with-a-carousel.html
Below is my carousel.js file:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!',
'/static/app/search/js/lib/jquery.cloud9carousel.js'
], function(_, $, mvc, Carousel) {
var showcase = $("#showcase");
showcase.Cloud9Carousel( {
yOrigin: 42,
yRadius: 40,
itemClass: "dashboard-cell",
autoPlay: 1,
bringToFront: true,
onLoaded: function() {
showcase.css( 'visibility', 'visible' )
showcase.css( 'display', 'none' )
showcase.fadeIn( 1500 )
}
} )
});
Below is my carousel.css file:
#showcase {
height: 570px;
overflow: visible !important;
}
My cloud9carousel.js is placed at "/static/app/search/js/lib/jquery.cloud9carousel.js"
I even tried adding below at the starting of jquery.cloud9carousel.js file:
require([
'jquery'
], function($) {
But still no luck.
I am getting following error in my javascript developer console on browser:
Uncaught TypeError: showcase.Cloud9Carousel is not a function
at eval (eval at globalEval (common.js:15), <anonymous>:17:11)
at Object.execCb (eval at module.exports (common.js:139), <anonymous>:1658:33)
at Module.check (eval at module.exports (common.js:139), <anonymous>:874:51)
at Module.eval (eval at module.exports (common.js:139), <anonymous>:1121:34)
at eval (eval at module.exports (common.js:139), <anonymous>:132:23)
at eval (eval at module.exports (common.js:139), <anonymous>:1164:21)
at each (eval at module.exports (common.js:139), <anonymous>:57:31)
at Module.emit (eval at module.exports (common.js:139), <anonymous>:1163:17)
at Module.check (eval at module.exports (common.js:139), <anonymous>:925:30)
at Module.enable (eval at module.exports (common.js:139), <anonymous>:1151:22)
VM650:766 Uncaught TypeError: depMaps.slice is not a function
at Module.init (eval at module.exports (common.js:139), <anonymous>:766:51)
at eval (eval at module.exports (common.js:139), <anonymous>:1424:36)
Can anyone help and guide me what I am doing wrong? I added row id="showcase" in my dashboard as well.