Carousel bootstrap does not work data-touch

Asked

Viewed 18 times

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>```
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.