project/nuxt3/pages/index.vue

<script sepup>

</script>

<template>
    <section class="d-flex flex-column">
        <h1>Корочки Есть</h1>
        <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active" data-bs-interval="3000">
            <img src="../public/images/image03.webp" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item" data-bs-interval="3000">
            <img src="../public/images/image05.webp" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item" data-bs-interval="3000">
            <img src="../public/images/image01.webp" class="d-block w-100" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
        </div>
    </section>
</template>

<style scoped>
    img{
        height: 70vh;
    }
</style>