Uncaught TypeError: showcase.Cloud9Carousel is not a function

nagar57 — Wed, 26 Jun 2019 07:26:55 GMT

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.

topic Uncaught TypeError: showcase.Cloud9Carousel is not a function in Security

Uncaught TypeError: showcase.Cloud9Carousel is not a function