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>