Bootstrapでスライドショーを作りたい

Question

前提・実現したいこと

スライドショーの次のページを表示させる矢印を付けたい

発生している問題・エラーメッセージ

２，３ページ目の矢印はクリックできるが、１ページ目がクリックできない

<!--- start image slider--->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="7000">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <!--- slide1--->
            <div class="carousel-item active" style="background-image:url(img/slide0.jpg);">
                <div class="carousel-caption text-center">
                    <h1>Welcome To NUno</h1>
                    <h3>Animated Bootstrap Theme</h3>
                    <a class="btn btn-outline-light btn-lg" href="#course">Get Started</a>
                </div>
            </div>
            <!---slider2--->
            <div class="carousel-item" style="background-image:url(img/slide1.jpg);"></div>
            <!---slider3--->
            <div class="carousel-item" style="background-image:url(img/slide2.jpg);"></div>
        </div><!--- end carousel--->
        <!---prev next button-->
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aeia-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aeia-hidden="true"></span>
        </a>
     </div>
     <!--- end image slider--->

/*---slider---*/

.carousel-item {
    height: 100vh;
}

.carousel-caption {
    position: absolute;
    top: 38%;
    text-transform: uppercase;
    width: 100%;
    right: 0;
    left: 0;
}

.carousel-caption h1 {
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: .3rem;
    text-shadow: .1rem .1rem .8rem black;
    padding-bottom: 1rem;
}

.carousel-caption h3 {
    font-size: 2rem;
    text-shadow: .1rem .1rem .5rem black;
    padding-bottom: 1.1rem;
}

.btn-lg {
    border-width: medium;
    border-radius: 0;
    font-size: 1.1rem;
}

試したこと

原因は、文字がかぶってることにあると考えているのですが、対処法がわかりません。

Answer 1

こんばんは。

対処法がわかりません。

3つ挙げます。

---

前景をクリックできなくする方法。

.carousel-caption {
	pointer-events: none;
}

---

前面に出してしまう方法。

.carousel-control-next, .carousel-control-prev {
	z-index: 99;
}

---

前景を小さくしてしまう方法。

.carousel-caption {
	width: max-content;
	margin: 0 auto;
}

Comments

[RyoYo]

返信遅れて申し訳ないです。
どの方法でも解決しました！！
ありがとうございます。