<div class="row carousel-holder my-carousel">
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
        <ol class="carousel-indicators">

            @foreach($slike as $brojac => $slika)
                <li data-target="#myCarousel" data-slide-to="{{$brojac}}"
                @if($slika->glavna == 1) class="active" @endif></li>
            @endforeach

        </ol>
        <div class="carousel-inner">

            @foreach($slike as $brojac => $slika)
                <div @if($slika->glavna == 1) class="item active" @else class="item" @endif>
                    <img id="newsImageId" src="{{$slika->URL}}" style="height: 450px;margin: 0 auto;">
                </div>
            @endforeach

        </div>

        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>

<div class="row">&nbsp;</div>
<!-- thumb navigation carousel -->
<div class="col-md-12 hidden-xs" id="slider-thumbs">

    <ul class="list-inline">
        @foreach($slike as $brojac => $slika)
            <li>
                <a id="carousel-selector-{{$brojac}}" @if($slika->glavna == 1) class="selected" @endif>
                    <img src="{{$slika->URL}}" width="100px" max-height="100px">
                </a>
            </li>
        @endforeach
    </ul>

</div>

<script>
    $('#myCarousel').carousel({
        interval: 4000
    });

    // handles the carousel thumbnails
    $('[id^=carousel-selector-]').click( function(){
      var id_selector = $(this).attr("id");
      var id = id_selector.substr(id_selector.length -1);
      id = parseInt(id);
      $('#myCarousel').carousel(id);
      $('[id^=carousel-selector-]').removeClass('selected');
      $(this).addClass('selected');
    });

    // when the carousel slides, auto update
    $('#myCarousel').on('slid', function (e) {
      var id = $('.item.active').data('slide-number');
      id = parseInt(id);
      $('[id^=carousel-selector-]').removeClass('selected');
      $('[id=carousel-selector-'+id+']').addClass('selected');
    });
</script>