The Last Carousel Widget You'll Ever Need

[Dylan Mann1]

Add the Slick Carousel to your Service Portal

Let’s face it, creating a custom carousel sucks! I’ve come to be known as “the carousel guy” in our dev team here at JG. At first, it was because whenever we needed to create a custom carousel I was the guy who got stuck with the job, but as time went on it was because I developed a deep love for cool carousels! Now, I want to spread that love of carousels to the ServiceNow Community.

My favorite library for developing carousels by far is Slick, developed by Ken Wheeler. With all of it’s properties, events and methods offered, you have the tools to create all kinds of cool, custom carousels. Don’t take my word for it though, see for yourself! Check out the Slick website and repository by following these links:

Website: http://kenwheeler.github.io/slick/   

Repository: https://github.com/kenwheeler/slick

So with my carousel confessional out of the way, I want to share my love of carousels with the rest of the ServiceNow community! I’ve developed a Slick Carousel widget you can download for free and start using today. There’s just three easy steps to setting up your carousel. Add your widget to your Service Portal page, add it’s slides through the widget instance form and configure your widget's options. It’s as simple as that!

Features include:

• Dynamic slides
• 8 different carousel types to choose from
• Choose how many slides you want to show
• Customizable widget options
• Fully Responsive!

If this carousel doesn’t exactly meet your needs, it’s very easy to customize! Just copy and code. The beauty of Slick is it takes the headache out of carousel development, and now that extends to ServiceNow too! By following the documentation in the Slick website you can easily create your own custom carousels within your widget.

Some of the carousel types included:

Standard - Single Slide

Standard - Multiple Slides

Variable Width

Slider Syncing

To download this widget click here!

If you have any questions or concerns you can email me at dmann@jahnelgroup.com or leave a comment here, happy coding!

[andrewfurgiuele]

Wow!!! Super helpful for the Portal I'm working on!

[foura]

thank you 

[KaChan]

Trying to do the same , but found your's. Thx! Perfect!

[Paul Douglas]

Good stuff Dylan.

Do you know if there are any issues with your update set on Madrid? Any dependencies?

I have tried adding the update set to two Madrid instances (one personal, one a dev) and I receive the following errors when previewing:

m2m_sp_dependency_css_include_26c997254fa15300ab7100f18110c7b7	Could not find a record in sp_css_include for column sp_css_include referenced in this update
sys_restricted_caller_access_26c866b64fb51300ab7100f18110c718	Could not find a table sys_restricted_caller_access this update requires
sp_carousel_slide_5ca698214fb11300ab7100f18110c70c	Could not find a record in sp_instance_carousel for column carousel referenced in this update

Cheers

[yundlu316]

Hey Paul, I'm running into the same issue, did you find a resolution to this?  Thanks!

[Paul Douglas]

Nah - sorry. In the end my project didn't require a slider so I never pursued it. But I would like to revisit one day.

[Dylan Mann1]

Hey Paul, Yundlu,

I just tested this in my personal instance. I think this may be a result of me deleting some test slides/dependencies. If you were to either ignore or accept the errors in your preview the carousel should still work just fine. 

Thanks!

Dylan

[niemannjoe1]

Good morning Dylan,

I have successfully added slides to a cloned version of the carousel widget. What i am trying to do now is change the animation type for a slide to a fade-in and fade-out. Any idea on how to do that?

Joe Niemann

[Dylan Mann1]

Good question, when I initially built this I tried including fade as an option but couldn't get it to work for the life of me. Lucky for you though, I've figured it out!

Bootstrap already has a class called fade so I think it interferes with our slick class. You'll need to add a new slick class in the link function like so:

$('.slick-fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
});

You can change the properties if you like. Then create a new choice in the Carousel Type options as slick-fade. After you select that option for your widget the slides will fade in/out. 

If you're not using the Slick Carousel from this article, check out the bootstrap docs here: 

https://getbootstrap.com/docs/4.1/components/carousel/

[Albert Cruz]

I played around with the widget and I was able to configure it when added to a portal page, but I require something exactly like this that I can add as a variable to a catalog item.

[Dylan Mann1]

Hey Albert, so you can add this to a catalog item via a variable type of macro. Here's an article walking you through how to do it. 

https://community.servicenow.com/community?id=community_question&sys_id=8c804be1db98dbc01dcaf3231f96...

You may need to clone the widget and make some customizations though in order to get this to work. It requires a widget instance to add the images and I don't think one gets generated when you add a widget as a macro in this way. 

Cheers,

Dylan

[Android]

انا لا احب العودة والانسحاب بل احب الاستمرار مع النصروالتقدم والنجاح والاستمرارية والمتابعة هي التي توصل الإنسان الي غايته وأحلامه ارجو ان تكون نهاية تعبي هذا وإهدار المال والوقت المال نهايتها الإنتصار والاعتزاز بما قمت به من جهد

[mlew]

Link to download the widget is broken.

[Tim Deniston]

The update set was posted to the Share site here: https://developer.servicenow.com/connect.do#!/share/contents/8628883_slick_carousel?v=1.0&t=PRODUCT_...

[Wesley Breshear]

Hello Dylan,

Could you update the link to your Widget or send it to me?  Greatly appreciate.

Thank you,

-Wesley

[Daniel Arnold]

If anyone is still wrestling with changing the carousel widget to be able to do fade-in and fade-out transitions between images, I found an alternative way that worked great!

1. Open up the Theme for the page the widget is attached to i.e. "la jolla."

2. Select "New" for CSS Includes.

3. Select "style sheet" for source in the CSS include.

4. Select the magnifying glass for style sheets and create a new style sheet with the following script:

/* Carousel fade effect */
.carousel .carousel-inner .item {
  transition: opacity 1s;
  opacity: 0;
}

.carousel .carousel-inner .active {
  opacity: 1;
}

.carousel .carousel-inner .active.left,
.carousel .carousel-inner .active.right {
  opacity: 0;
  z-index: 1;
}

.carousel .carousel-inner .next.left,
.carousel .carousel-inner .prev.right {
  opacity: 1;
}

.carousel .carousel-inner .next,
.carousel .carousel-inner .prev,
.carousel .carousel-inner .carousel-control {
  z-index: 2;
}

5. Save your work and refresh your page to see the fading transitions!

Best Regards,

Danny

[Julie21]

Hi Dylan. 

It seems like the link to where the carousels can be downloaded no longer works? Do you know if it's still working and can be used on the employee center? Thanks!

/Julie. 

[Ashwin Perumal1]

Can anyone send me the exact link to download the widget. I am not able to download the widget. Can anyone  send widget xml please. I too want to try the functionality

[Tim Deniston]

The widget/XML appear to still be available on the Share site here: https://developer.servicenow.com/connect.do#!/share/contents/8628883_slick_carousel?v=1.0&t=PRODUCT_...

You will need to log in and then you can download the XML update set.