Upgrade carousel to contain HTML with the Images

[bresleveloper]

Sorry for how it looks, i dont know wall Markdown, but with these simple changes i made i can now add simple html with the carousel, could be great id you add them since your module is awsome

see results here https://bresleveloper.github.io/ng4/Home (main slider and maybe soon to come birthdays)

Changes:

1. SlideComponent:

   a. html - change template to <div [class.slide--hidden-initial]="isHidden" [attr.data-slide]="slideNo"> <img class="slide" [src]="src"> <div *ngIf="HTML" class="slide-html" [innerHTML]="HTML"></div> </div> b. ts - add @Input() public HTML: string; to component c. scss under assets/ - add .slide-html{position: absolute;right: 75px;top: 25px;padding:0 25px;opacity: 0.7;background: white;} and @media screen and (max-width: 600px){ .slide-html{ right: 25px; max-width: 50%; } }

2. CarouselComponent a. html - add to the HTML attribute like this [HTML]="sourcesHtml[i].html" b. ts - add @Input() private sourcesHtml: {}[]; c. ts add code to begining of initData(){ if (this.sourcesHtml && this.sourcesHtml.length > 0){ this.sources = []; for (let i = 0; i < this.sourcesHtml.length; i++) { this.sources.push(this.sourcesHtml[i]['src']); if ( ! this.sourcesHtml[i]['html'] ){ this.sourcesHtml[i]['html'] = null; } } } else { this.sourcesHtml = []; for (let i = 0; i < this.sources.length; i++) { this.sourcesHtml.push(''); } } } d.

3. usage in component, a. data is
   public imageWithHtmlSources = [ { src :'https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAx6AAAAJGRmZDRjNzMyLThmODQtNDljZi1iMWU2LWVmYTFjZWZhYjZjMg.jpg', html: '

   Go Find God

   yes you should do that it will make you happy believe me i love you

   read more...' }, b. in<carousel [sourcesHtml]="imageWithHtmlSources" ..>`

[bonjurmrfirst]

@bresleveloper Hi, Passing html template to carousel this way is not good idea. I think using <ng-content> here is more easy and more Angular way.

[bresleveloper]

You're right but you dont expose the <item> but it would be great to see such an upgrade