0

I'm using Bootstrap carousel for some dynamically created slides that have different slide duration. I used THIS and it works fine. What I want to achieve is that when the first slide is displayed, the background is different. Here's a JSFiddle. I was unable to make the slideshow work on the fiddle, but the code is basically the same as the one I'm using in my project, so I'm probably missing/failing a resource. I would like the background change based on ng-class="timer[$index].def == 1 ? 'defaultbackground' : 'slidebackground'" or possibly on slideCollection[$index].def == 1 ? 'defaultbackground' : 'slidebackground'", but in the latter I realize the ng-class is outside the iteration.

I spent a few days on this trying everything that passed my mind... any idea on how to make it work? I guess it's a piece of cake in the end.

Tomo
  • 429
  • 1
  • 10
  • 24
  • (_you could have tried a [ui-bootstrap carousel](https://angular-ui.github.io/bootstrap/#!#carousel)_) – Aleksey Solovey Feb 12 '18 at 09:58
  • @Aleksey: that won't change anything afaik and I prefer to avoid ui-bootstrap. – Tomo Feb 12 '18 at 10:09
  • i haven't looked in detail at your code, but here is something that can help you; [updated fiddle](http://jsfiddle.net/bstvjp0q/1/); first i managed to make it work in the fiddle (using older angular ressource), then my example shows you how you can update your class dynamically. You had a logic error here, as $index is not available outside of `ng-repeat` and anyway wouldn't have reflected which one is active. All you have to add is a way to reflect active slide to `currentIndex` var, didn't have the time to look for that. – Kaddath Feb 12 '18 at 10:19
  • I know that $index is not available outside of ng-repeat, if I for example put `ng-class="$index == 0 ? 'defaultbackground' : 'slidebackground'"` inside ng-repeat, it will work, but the background won't be fullscreen. Your mod won't work, I guess because it returns defaultbackground/slidebackground with double " instead of single '. You're right, I have to reflect the active slide outside of ng-repeat, but I'm unable to find a working solution. – Tomo Feb 12 '18 at 11:34
  • yeah was quick to do it sorry, it wasn't working because of `"` but because there was `class` and `ng-class` for same element and that created a conflict i guess. [Updated fiddle here](http://jsfiddle.net/bstvjp0q/2/). (click on "GO" to change `currentIndex`) – Kaddath Feb 12 '18 at 11:51
  • @Kaddath: Still don't know how to do it on its own instead of clicking on a button/link. If you have time to write the solution in the answer, I'll accept it as answer. Thank you. – Tomo Feb 21 '18 at 13:39

0 Answers0