在简单幻灯片旁边使用 MultiItem Bootstrap Carousel SlideShow

Question

我正在创建一个网站，并且必须在滑块中显示产品。我在一个页面中使用 simple Carousel slide 显示和 multi Item Slide 显示。多项目幻灯片有一个 css 类。 当我将此类引用添加到页面简单的轮播幻灯片放映时，中断和多项目幻灯片放映无法正常工作。

当我删除多个项目幻灯片放映 css 时，简单的轮播幻灯片正常工作。

我使用了不需要 css 文件和完美工作的多项目幻灯片，但是这个多项目幻灯片不支持响应原则，我不想使用这种多项目幻灯片。

我猜我的纯 bootstratp css Carousel 代码与多项目幻灯片 css 文件冲突，我该如何解决这个问题。

更新

我附上片段 d 代码如下： 这是我在 _SharedView 页面中的 head 标签

<link href="~/bootstrap-4.3.1-dist/css/bootstrap.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="~/bootstrap-4.3.1-dist/js/bootstrap.js"></script>

还有我在 index.cshtml 视图中的简单轮播幻灯片：

<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://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
            <div class="carousel-caption">
                <h3>Los Angeles</h3>
                <p>We had such a great time in LA!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
            <div class="carousel-caption">
                <h3>Chicago</h3>
                <p>Thank you, Chicago!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
            <div class="carousel-caption">
                <h3>New York</h3>
                <p>We love the Big Apple!</p>
            </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>

和 index.cshtml 视图中的多项目幻灯片放映：

<div class="container">
    <div class="carousel-wrapper">
        <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
            <div class="carousel-inner w-100 row no-gutters" role="listbox">
                <div class="carousel-item col-md-4 active">
                    <img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300/888/fff?text=1" alt="slide 1">
                </div>
                <div class="carousel-item col-md-4">
                    <img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300/DD2222?text=2" alt="slide 2">
                </div>
                <div class="carousel-item col-md-4">
                    <img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300/22DD22?text=3" alt="slide 3">
                </div>
                <div class="carousel-item col-md-4">
                    <img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300/FFCC11?text=4" alt="slide 4">
                </div>
                <div class="carousel-item col-md-4">
                    <img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300/0099FF?text=5" alt="slide 5">
                </div>
                <div class="carousel-item col-md-4">
                    <img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300?text=6" alt="slide 6">
                </div>
                <div class="carousel-item col-md-4">
                    <img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300/4455DD?text=7" alt="slide 7">
                </div>
                <div class="carousel-item col-md-4">
                    <img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300?text=8" alt="slide 8">
                </div>
            </div>
            <a class="carousel-control-prev text-dark my-auto" href="#carouselExample" role="button" data-slide="prev">
                <i class="fa fa-chevron-left fa-lg"></i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next text-dark" href="#carouselExample" role="button" data-slide="next">
                <i class="fa fa-chevron-right fa-lg"></i>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

我还将这个 css 代码附加到我的项目中：

@media (min-width: 768px) {

    .carousel-wrapper {
        overflow-x:hidden;
    }

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item  {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }

    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }

    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33%;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

还有这个java脚本：

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

    var $e = $(e.relatedTarget);
    var $t = $(this);
    var $inner = $t.find('.carousel-inner');
    var idx = $e.index();
    var itemsPerSlide = 3;
    var totalItems = $t.find('.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") {
                $t.find('.carousel-item').eq(i).appendTo($inner);
            }
            else {
                $t.find('.carousel-item').eq(0).appendTo($inner);
            }
        }
    }
});

但是我的简单 Carousel 中断，我的 multiItem Carousel 没有显示任何东西并且不起作用

Answer 1

尝试在“多项目幻灯片”中使用 owl carousel。 如果不共享一些代码 sn-ps，我可以提供帮助。