bootstrap carrousel in portfolio doesn't work-CodePudding

I am trying to make a portfolio for a learning project. below is my code

HTML

<html lang="en">
<meta charset="UTF-8">
<meta http-equive="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>Portfolio</title>

<body>
    <header>
        <nav >
            <div >
                <a  href="#"><img  src="images/logo.png" alt="logo"
                        style="width: 30%;"></a>
                <div ></div>
                <div  id="navbarSupportedContent">
                    <ul >
                        <li >
                            <a  href="#">
                                <!-- <img src="images/Home_free_icon.svg" alt="Home" style="width: 5%;"> -->
                                Home
                            </a>
                        </li>

                        <li >
                            <a  href="#">Services</a>
                        </li>

                        <li >
                            <a  href="#">Compétences</a>
                        </li>

                        <li >
                            <a  href="#">Portfolio</a>
                        </li>

                        <li >
                            <a  href="#">Tarifs</a>
                        </li>

                        <li >
                            <a  href="#">À Propos</a>
                        </li>

                        <li >
                            <a  href="#">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <div id="carouselExampleFade"  data-bs-ride="carousel">
        <div >
            <div >
                <img src="images/rrr.jpg"  alt="...">
            </div>
            <div >
                <img src="images/index.jpeg"  alt="...">
            </div>
            <div >
                <img src="images/Home_free_icon.svg"  alt="...">
            </div>
        </div>
        <button  type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
            <span  aria-hidden="true"></span>
            <span >Previous</span>
        </button>
        <button  type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
            <span  aria-hidden="true"></span>
            <span >Next</span>
        </button>
    </div>


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM"
        crossorigin="anonymous"></script>

</body>

</html>

CSS


* {
    font-family: 'Roboto Condensed';
}

header {
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

header::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

header nav.navbar {
    z-index: 999;
}

header nav.navbar .navbar-brand {
    color: transparent;
    font-size: 1.4rem;
}

header nav.navbar .navbar-nav .nav-item {}

/* Modify the background color */
.navbar-custom {
    background-color: white;
}

.logoimg {
    transition: transform .7s ease-in-out;
}

.logoimg:hover {
    transform: rotate(360deg);
}



.nav-item::after {
    content: '';
    display: block;
    width: 0px;
    height: 2px;
    background: red;
    transition: 0.2s;
}

.nav-item:hover::after {
    width: 100%;
    color: red;
}

.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: red;
}

.nav-link {
    padding: 15px 5px;
    transition: 0.2s;
}

.navbar .navbar-nav .nav-link:hover {
    color: red;
}

.dropdown-item.active,
.dropdown-item:active {
    color: red;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background: red;
}

.navtext:hover {
    color: red;
}

.carousel-item {
    height: 100vh;
    min-height: 300px;
    background: no-repeat scroll center scroll;
}

I tried to introduce a carousel to my portfolio, I took a carousel from the official bootstrap site but it doesn't work. I'm trying to figure out the error but I can't see where it is. I watched videos I checked tutorials but with everyone it works from what I saw. I followed the steps in the tutorial but it still doesn't work, can someone tell me how to solve this bootstrap problem?

CodePudding user response：

paste the code in the below answer to check if that works, Bootstrap 4 Carousel sliders not working

If the above code also did not work for you, the error is definitely of the version of bootstrap used, so upgrade or downgrade to check

Also sometimes, some adblockers restrict the sliding in localhost, try opening the portfolio in the incognito tab