Placing Widget over a Carousel image

[Steven Magee]

Is it possible in the Service Portal to have a carousel of images on the homepage instead of the background but still have the homepage search widget over it? and if so how can this be done.

Thanks!

Steve

[skodu]

HI Mathew,

Thanks for the awesome solution. I configured the widget accordingly and surprisingly I cannot get the images sliding. Do you have any ideas on this?

Thanks,

Sharan

[Nithin12]

Hi Glenn,

I Used your code , But in my case I am getting blank in place of Image.

Even I have added image in this table:sp_carousel_slide.

But still I am not getting image. Should I need to follow any additional steps..?

or please let me know the steps to get the images in the background.

Thanks,

Nithin.

[Ashwin Perumal1]

I created a new widget using the same code which you have pasted and added that widget to the respective page. But it is shwoing only homepage search not the images added in sp_instance_carousel.LIST. 

Is there any other step we need to follow or should take a copy of OOB carousel widget also. Can you pls help me on this.

[rlathrop]

I was able to achieve this with the following:

HTML:

 <div id="homepage-search" class="hidden-xs wrapper-xl">     
           <div class="wrapper-xl2 ">   
               <h1 class="text-center text-4x m-b-lg sp-tagline-color" ng-bind="options.title"></h1>   
               <h4 ng-if="options.short_description" class="text-center m-b-lg sp-tagline-color" ng-bind="options.short_description"></h4>   
               <sp-widget widget="data.typeAheadSearch" />   
           </div>   
       </div>   


       <div class="pull-in" id="sp-carousel">   
           <uib-carousel interval="options.interval" class="carousel-inner">   
               <uib-slide ng-repeat="slide in ::data.slides" class="item" active="slide.active">   
                   <div class="containers"> 
                       <a href="{{::slide.url}}" title="Open carousel item" class="full-width">   
                           <img ng-src="{{::slide.background}}" class="fullSize"/>   
                       </a>   
                   </div>
               </uib-slide>   
           </uib-carousel>   
       </div>   

CSS:

.sp-tagline-color {   
   color: $sp-tagline-color; 
   z-index: 5;
}   
.wrapper-xl {
       padding: 0px !important;
       z-index: 5!important;
       position: absolute!important;
}
.wrapper-xl2 {
     padding-top: 100px !important;
       padding-bottom: 0px;
       padding-left: 140px;
       padding-right: 140px;
       z-index: 5 !important;
       background: transparent !important; 
}
.fullSize{ 
   width:100%!important;
}

Server Script:

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

[tiyasichowdhury]

Hi  Kilo explorer

, Just keep the OOB cases line : ".carousel-inner > .item > .container {width: 100%}" along with the CSS script given by Mathew and it worked. The image will come as in the full width of the page.