client/app/slideshow/slideshow.html
author rougeronj
Tue, 02 Jun 2015 09:46:30 +0200
changeset 106 cb13a9009bf5
parent 96 3542155549e4
child 178 a3e1106b6f96
permissions -rw-r--r--
improve slideshow interface and add ngTouch to handle swipe on mobile

<div class="slideshow  container-fluid">
    <div class="row slideshow-title">
            <h1 class="book">
                {{book.title}}
                <small>par Jonathan Linvingston</small>
            </h1>
            <h1 class="pull-right poi"><small>{{book.count}} points d'intĂ©rĂȘts</small></h1>
    </div>
    <div class="carousel-holder row">
        <carousel>
            <slide ng-repeat="slide in slides" active="slide.active">
                <div class="container-fluid slideshow-content">
                    <div class="col-sm-8 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-sm-4 caption">
                        <div class="user-details">
                            <h1>{{slide.title}}</h1>
                            <p>{{slide.description}}</p>
                            <p>
                                <em>{{slide.tags.join(', ')}}</em>
                            </p>
                        </div>
                        <div class="details">
                            <p>
                                <strong>Titre&nbsp;:&nbsp;</strong><small>{{slide.details.title}}</small>
                            </p>
                            <p>
                                <strong>Description&nbsp;:&nbsp;</strong><small>{{slide.details.description}}</small>
                            </p>
                        </div>
                    </div>
                </div>
            </slide> 
        </carousel>
        <div class="insight" >
            <div class="item" ng-repeat="slide in slides" data-ng-click="slide.active = true">
                <img ng-src="{{ slide.details.images[0] }}" my-customer />
            </div>
        </div>
    </div>
</div>