insert images to Carousel widget

[RudhraKAM]

Hello I have a requirement to insert the images in Carousel widget , some how i find this post which answered     but when i follow the same the other images in   Sp_carousel_slide table is showing and if the image size is different then it is expanding the width and height of the carousel . Can some one help me in just adding the images to carousel

FYI: i created the different carousel name and added images there but default images are also showing up .

HTML

1.       <div id="homepage-search" class="hidden-xs wrapper-xl">    
2.           <div class="wrapper-xl">  
3.               <h1 class="text-center text-4x m-b-lg sp-tagline-color" ng-bind="options.title"></h1>  
4.               <h4 ng-if="options.short_description" class="text-center m-b-lg sp-tagline-color" ng-bind="options.short_description"></h4>  
5.               <sp-widget widget="data.typeAheadSearch" />  
6.           </div>  
7.       </div>  
8.       <div class="pull-in" id="sp-carousel">  
9.           <uib-carousel interval="options.interval">  
10.               <uib-slide ng-repeat="slide in ::data.slides" active="slide.active">  
11.                   <div class="container">  
12.                       <a href="{{::slide.url}}">  
13.                           <img ng-src="{{::slide.background}}" style="margin:auto; width:100%;"/>  
14.                       </a>  
15.                   </div>  
16.               </uib-slide>  
17.           </uib-carousel>  
18.       </div>  

CSS

1. .sp-tagline-color {  
2.   color: $sp-tagline-color;  
3. }  
4.  
5. #sp-carousel {  
6.       position: absolute;  
7.       left: 0px;  
8.       top: 0px;  
9. }  
10.  
11. #homepage-search {  
12.   z-index: 5;  
13. }  

Server Script

1. data.slides = $sp.getRelatedList('sp_carousel_slide','carousel');  
2.  
3. var typeAheadSearchOpts = {title: gs.getMessage('How can we help?'), size: 'lg', color: 'default'};  
4. data.typeAheadSearch = $sp.getWidget('typeahead-search', typeAheadSearchOpts);  

[dustin_trainer]

You will need to go into the "Widget Instance" of the new carousel that you have created. The images will need to be added in the carousel slides.

[RudhraKAM]

Hello Dustin , i did that and it is using the other Carousel images too and how to make the images standard size in the Carousel? can we change the carousel height and width ?

[dustin_trainer]

So your image is showing, as well as the OOB images? If that is the case, you would just need to remove those images in the "Carousel Slides" list for that widget instance.

Inspecting the OOB images shows they are 1022x300px. You can use whatever size you like but having different sized images would not be ideal aesthetically.

I don't believe the image sizes can be altered within ServiceNow. You would need to modify that size within an image editor prior to uploading.

[RudhraKAM]

what if i want to add another Carousel and different images ?