Why are my arrows on card carousel not working?

I am having troubles with my card carousel to work. I am still learning JS, but i'm positive that's the problem and i don't know how to fix it. Whenever i click on the button/arrow of this carousel, instead of sliding, it reloads the entire page. I checked everything, but obviously there's something that i keep missing. Here is the code in JS:

    (function($) {
    "use strict";

    $('.next').click(function(){ $('.carousel').carousel('next');return false; });
    $('.prev').click(function(){ $('.carousel').carousel('prev');return false; });
    
})(jQuery);

HTML:

<section class="container pt-3">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Vesti</h1>
                </div>
            </div>
        </section>
        <section class="carousel slide" data-ride="carousel" id="postsCarousel">
            <div class="container">
                <div class="row">
                    <div class="col-12 text-md-right lead">
                        <a class="btn btn-secondary-outline prev" href=""><i class="fa fa-lg fa-chevron-left"></i></a>
                        <a class="btn btn-secondary-outline next" href=""><i class="fa fa-lg fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
            <div class="container pt-0 mt-2">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="card-deck">
                            <div class="card h-100">
                                <div class="card-img-top card-img-top-250">
                                    <img class="img-fluid" src="slike/img1.jpg" alt="Carousel 1">
                                </div>
                                <div class="card-body pt-2">
                                    <h6 class="small text-wide p-b-2">Lorem</h6>
                                    <h2>
                                        <a href="">Lorem Ipsum</a>
                                    </h2>
                                </div>
                            </div>
                            <div class="card h-100">
                                <div class="card-img-top card-img-top-250">
                                    <img class="img-fluid" src="slike/img2.jpg" alt="Carousel 2">
                                </div>
                                <div class="card-body pt-2">
                                    <h6 class="small text-wide p-b-2">Lorem</h6>
                                    <h2>
                                        <a href="">Lorem Ipsum</a>
                                    </h2>
                                </div>
                            </div>
                            <div class="card h-100">
                                <div class="card-img-top card-img-top-250">
                                    <img class="img-fluid" src="slike/img3.jpg" alt="Carousel 3">
                                </div>
                                <div class="card-body pt-2">
                                    <h6 class="small text-wide p-b-2">Lorem</h6>
                                    <h2>
                                        <a href="">Lorem Ipsum</a>
                                    </h2>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="card-deck">
                            <div class="card">
                                <div class="card-img-top card-img-top-250">
                                    <img class="img-fluid" src="slike/img4.png" alt="Carousel 4">
                                </div>
                                <div class="card-body pt-2">
                                    <h6 class="small text-wide p-b-2">Category 2</h6>
                                    <h2>
                                        <a href="">Lorem Ipsum</a>
                                    </h2>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-img-top card-img-top-250">
                                    <img class="img-fluid" src="slike/img5.jpg" alt="Carousel 5">
                                </div>
                                <div class="card-body pt-2">
                                    <h6 class="small text-wide p-b-2"><span class="pull-xs-right">12.04</span> Category
                                        1</h6>
                                    <h2>
                                        <a href="">Lorem Ipsum</a>
                                    </h2>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-img-top card-img-top-250">
                                    <img class="img-fluid" src="slike/img6.jpg" alt="Carousel 6">
                                </div>
                                <div class="card-body pt-2">
                                    <h6 class="small text-wide p-b-2">Category 3</h6>
                                    <h2>
                                        <a href="">Lorem Ipsum</a>
                                    </h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>