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

Question

Мне нужно создать галерею изображений слайдера, которая работает на всех устройствах, больших и маленьких. Я следовал руководству, загрузил предоставленные файлы и сохранил только ту часть карусели, которая мне нужна. Это учебник . Однако при добавлении кода на мой веб-сайт происходит сбой, и я вижу только одно изображение за раз вместо целого ряда изображений.

Вот как это должно выглядеть на основе учебника:

Вот как это показано на моем сайте:

Из файлов, которые я скачал из учебника, только мне нужны animation.css и сценарий карусели из файла scripts.js.

Вот мой код .

HTML:

<div class="top-content" style="border: 1px solid red;">
    <div class="container-fluid">
        <div id="carousel-example" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner row w-100 mx-auto" role="listbox">
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active">
                    <img src="https://via.placeholder.com/150" class="img-fluid mx-auto d-block" alt="img1" style="border: 1px solid red;">
                </div>
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                    <img src="https://via.placeholder.com/150" class="img-fluid mx-auto d-block" alt="img2" style="border: 1px solid blue;">
                </div>
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                    <img src="https://via.placeholder.com/150" class="img-fluid mx-auto d-block" alt="img3" style="border: 1px solid green;">
                </div>
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                    <img src="https://via.placeholder.com/150" class="img-fluid mx-auto d-block" alt="img4" style="border: 1px solid purple;">
                </div>
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                    <img src="https://via.placeholder.com/150" class="img-fluid mx-auto d-block" alt="img5" style="border: 1px solid cyan;">
                </div>
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                    <img src="https://via.placeholder.com/150" class="img-fluid mx-auto d-block" alt="img6" style="border: 1px solid orange;">
                </div>
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                    <img src="https://via.placeholder.com/150" class="img-fluid mx-auto d-block" alt="img7">
                </div>
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                    <img src="https://via.placeholder.com/150" class="img-fluid mx-auto d-block" alt="img8">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

JavaScript:

$('#carousel-example').on('slide.bs.carousel', function (e) {

    /*
        CC 2.0 License Iatek LLC 2018
        Attribution required
    */
    var $e = $(e.relatedTarget);
    var idx = $e.index();
    var itemsPerSlide = 5;
    var totalItems = $('.carousel-item').length;

    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var i=0; i<it; i++) {
            // append slides to end
            if (e.direction=="left") {
                $('.carousel-item').eq(i).appendTo('.carousel-inner');
            }
            else {
                $('.carousel-item').eq(0).appendTo('.carousel-inner');
            }
        }
    }
});