This question has been flagged
1 Reply
5440 Views

Hi, I am trying to add Bootstrap 4 carousel to my card. Carousel working perfectly but the next and prev buttons are not working.

If there is a problem with js file carousel would not work too. I do not understand problem. Can you help me? Here my  codes.

<div id="product_card_slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<span itemprop="image" t-attf-content="{{request.httprequest.url_root}}web/image/product.template/{{product.id}}/image" t-field="product.image" t-options="{'widget': 'image', 'resize': None if product_image_big else '300x300', 'zoom': 'image'}" t-att-alt="product.name" />
</div>
<t t-if="product.product_image_ids">
<t t-foreach="product.product_image_ids" t-as="pimg">
<div class="carousel-item">
<span itemprop="image" t-attf-content="{{request.httprequest.url_root}}/website/image/product.image/{{pimg.id}}/image" t-field="pimg.image" t-options="{'widget': 'image', 'resize': None if product_image_big else '300x300', 'zoom': 'image'}" t-att-alt="product.name" />
</div>
</t>
</t>
</div>
<a class="carousel-control-prev" href="#product_card_slider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#product_card_slider" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
Avatar
Discard
Best Answer

Hi,

Try adding the scripts in template.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"/>

Regards

Avatar
Discard