Question

我需要创建一个适用于所有设备（无论大小）的滑块图像库。我遵循了一个教程，并下载了提供的文件，仅保留了我需要的轮播部分。 This is the tutorial。但是，当将代码添加到我的网站时，出现了一些故障，我一次只能看到一张图片，而不能看到整行图片。

这是基于教程的外观：

这是它在我的网站上显示的方式：

从我从本教程下载的文件中，我唯一需要的是animation.css和scripts.js文件中的轮播脚本。

Here's my codepen。

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');
            }
        }
    }
});

轮播不显示所有图像？

0 个答案: