<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>