0
I used the bootstrap Carousel to display the images from a list of products. I use Angularjs to retrieve the list from the database. I make use of ng-repeat to assemble the page with the product data and an ng-repeat to display the product images in Carousel. The images are Base64. What really interests me is the Carousel’s data-touch that doesn’t work, only works after clicking the next or previous button. Follow the code of the page.
<div class="col-md-5 paddingleft0 padding0">
<div class="box-moda border centralizar-carrossel-imagem">
<div id="carouselExampleIndicators{{p.Id}}" class="carousel slide carousel-fade"
data-ride="carousel" data-keyboard="true" data-touch="true" data-pause="hover" data-wrap="false">
<ol class="carousel-indicators cor-invertida">
<li data-target="#carouselExampleIndicators{{p.Id}}" ng-repeat="imagem in p.Imagens" data-slide-to="{{$index}}" ng-class="{active: !$index}"></li>
</ol>
<div class="carousel-inner height360px">
<div class="carousel-item" ng-class="{active: !$index}" ng-repeat="imagem in p.Imagens" data-interval="5000">
<img class="img-fluid d-block w-100" src="data:image/png;base64,{{imagem}}" height="300" alt={{p.Nome}}>
</div>
</div>
<a class="carousel-control-prev" data-target="#carouselExampleIndicators{{p.Id}}" role="button" data-slide="prev" style="background-color:transparent!important">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" data-target="#carouselExampleIndicators{{p.Id}}" role="button" data-slide="next" style="background-color:transparent!important">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Próximo</span>
</a>
</div>
</div>
</div>```