Question

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

当我删除多项目幻灯片放映css refreence简单轮播幻灯片时，

我使用了多项目幻灯片放映，它不需要css文件并可以正常工作，但是这种多项目幻灯片放映不支持响应性原理，我也不想使用这种多项目幻灯片放映。

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

更新

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

<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视图中的简单的Carousel幻灯片放映：

<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

尝试在“多项目幻灯片”中使用猫头鹰传送带。如果不共享一些代码段，那么我可以提供帮助。

在简单的幻灯片旁边使用MultiItem Bootstrap旋转木马幻灯片

1 个答案: