<div class="slideshow">
    <div class="slide-title">
            <h1>Diaporama - {{book.title}}</h1>
    </div>
    <div class="carousel-holder row">
        <carousel>
            <slide ng-repeat="slide in slideshow" active="slide.active">
                <div class="container slide-content">
                    <div class="col-md-7 media">
                        <img ng-if="slide.details.images[0]" ng-src="{{ slide.details.images[0] }}" style="margin: auto;">
                        <audio ng-if="slide.details.audio" ng-src="{{ slide.details.audio }}" style="margin: auto; controls loop"></audio>
                        <video ng-if="slide.details.video" ng-src="{{ slide.details.video }}" style="margin: auto;" controls></video>
                    </div>
                    <div class="col-md-5 caption">
                        <div class="user-details">
                            <h4>{{slide.title}}</h4>
                            <p>{{slide.description}}</p>
                            <p>{{slide.comment}}</p>
                            <p>
                                <em>{{slide.tags.join(', ')}}</em>
                            </p>
                        </div>
                        <hr />
                        <div class="details">
                            <p>
                                <strong>Titre&nbsp;:&nbsp;</strong><small>{{slide.details.title}}</small>
                            </p>
                            <p>
                                <strong>Description&nbsp;:&nbsp;</strong><small>{{slide.details.captionImg}}</small>
                            </p>
                        </div>
                    </div>
                </div>
            </slide> 
        </carousel>
        <ul class="list-unstyled list-inline row insight" >
            <li class="col-md-2 item" ng-repeat="slide in slideshow">
                <div class="img-ctn" ng-click="showSlide($index)">
                    <img class="img img-responsive image" ng-src="{{ slide.details.images[0] }}" />
                    <p>{{ slide.details.title }}</p>
                </div>
            </li>
        </ul>
    </div>
</div>