Я не могу изменить слайды изображений

Question

Я использую Bootstrap 4, и карусель, кажется, не работает. Я вижу свое активное изображение, а также следующий и предыдущий значки, но не могу изменить слайд, когда нажимаю значки.

.carousel-inner img {
            width: 100%;
            height: 100%;
        }

 @* Image Slider  *@

        <div id="demo" class="carousel slide" data-ride="carousel">
            <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
            </ul>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="~/Image/bg.jpg" alt="Clinic1" width="1100" height="500" />
                    <div class="carousel-caption ">
                        <h3>Clinic 1</h3>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="~/Image/bg.jpg" alt="Clinic2" width="1100" height="500" />
                    <div class="carousel-caption">
                        <h3>Clinic 2</h3>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="~/Image/bg.jpg" alt="Clinic3" width="1100" height="500" />
                    <div class="carousel-caption container-fluid">
                        <h3>Clinic 3</h3>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>

Answer 1

Используя Dummyimg gerenrator, добавив Bootstrap CSS, JS (вместе с jQuery и все) кажется, что он работает нормально.

Вы проверили путь к изображениям?

$('.carousel').carousel()

.carousel-inner img {
            width: 100%;
            height: 100%;
        }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>
<div id="demo" class="carousel slide" data-ride="carousel">
            <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
            </ul>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://dummyimage.com/600x400/000/fff&text=img1" alt="Clinic1" width="1100" height="500" />
                    <div class="carousel-caption ">
                        <h3>Clinic 1</h3>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="https://dummyimage.com/600x400/000/fff&text=img2" alt="Clinic2" width="1100" height="500" />
                    <div class="carousel-caption">
                        <h3>Clinic 2</h3>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="https://dummyimage.com/600x400/000/fff&text=img2" alt="Clinic3" width="1100" height="500" />
                    <div class="carousel-caption container-fluid">
                        <h3>Clinic 3</h3>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>

На всякий случай я добавил код JavaScript из документации , чтобы заставить его:

$('.carousel').carousel()