Using external jquery library in service portal

[AnnMarieC]

I'm trying to add a library I've used as a scroller in CMS, but I'm having trouble figuring out how to get it to work in Service Portal. Here is a link to the jquery plugin:

GitHub - wmh/jquery-scrollbox: A simple, lightweight jQuery plugin to scroll a list like carousel or...

Previously in CMS I would add the plugin as a UI script, call the UI script in a dynamic content block, and add one line of code in a script block to start the scrolling on a div with a ul element in it.

I have tried these steps in Service Portal:

1. Create a widget which will hold a Knowledge base scroller
2. Added the jquery-scrollbox as a dependency in the widget
3. Added a div which holds the knowledge base articles to be scrolled (pulled from a server lookup):

<div id="demo" class="scroll-text">
     <ul>
           <div ng-repeat="article in c.data.news_articles">
               <li>{{::article.desc}}</li>
           </div>
     </ul>
</div>

4. Tried to add code to the link function to start the scrolling, but that part isn't working

function(scope, elm){
   var el = $(elm[0]).find('#demo');
   el.scrollbox({
   startDelay: 2, // Start delay (in seconds)
   delay: 2, // Delay after each scroll event (in seconds)
   linear: true,
   step: 1,
   speed: 50
   });
}

I've tried many variations of the code in the link function, but can't get the scrollbox function to work. There are not any console errors.

Any help would be appreciated.

Thanks,

Ann Marie

[AnnMarieC]

Sorry for the delayed response here. I eventually just deleted / re-added everything and it worked, so there must have been something incorrectly linked in the dependency. Appreciate the help.

[Donald Anter]

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).