轮播显示部分视图时仅显示一张卡片？

Question

我使用以下链接创建了轮播 https://mdbootstrap.com/docs/jquery/javascript/carousel/ 但是，当将其放在局部视图中时，它看起来并不好，为什么呢？卡鲁苏尔只显示一张卡

Answer 1

问题可能与引导引用或MDBootstrap引用（例如CSS或JavaScript文件）无法成功加载有关。

我已经使用CDN参考创建了一个示例，它对我而言效果很好，请检查一下：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
<link rel="stylesheet" href="https://mdbootstrap.com/api/snippets/static/download/MDB-Pro_4.19.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://mdbootstrap.com/api/snippets/static/download/MDB-Pro_4.19.1/css/mdb.min.css">
<link rel="stylesheet" href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/css/compiled-addons-4.19.1.min.css">
<link rel="stylesheet" type="text/css" href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/css/mdb-plugins-gathered.min.css">
<style></style>

<partial name="~/Views/Home/testPartialView.cshtml" />

<script type="text/javascript" src="https://mdbootstrap.com/api/snippets/static/download/MDB-Pro_4.19.1/js/jquery.min.js"></script>
<script type="text/javascript" src="https://mdbootstrap.com/api/snippets/static/download/MDB-Pro_4.19.1/js/popper.min.js"></script>
<script type="text/javascript" src="https://mdbootstrap.com/api/snippets/static/download/MDB-Pro_4.19.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://mdbootstrap.com/api/snippets/static/download/MDB-Pro_4.19.1/js/mdb.min.js"></script>
<script type="text/javascript" src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/js/bundles/4.19.1/compiled-addons.min.js"></script>
<script type="text/javascript" src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/js/plugins/mdb-plugins-gathered.min.js"></script>
<script type="text/javascript"></script><div class="hiddendiv common"></div>

在部分视图中，我使用了this link中的多项目轮播示例代码。

修改：

在转盘底部的转盘指示器中显示页码。解决方法是，您可以设置轮播指示器指标的background-image属性，其代码如下（基于multi-item-carousel sample code）：

    <ol class="carousel-indicators">
        <li data-target="#multi-item-example" data-slide-to="0" 
            style="background-image: url('https://i.stack.imgur.com/Fn7MP.png') !important;
            background-repeat: no-repeat !important;" class="active"></li>
        <li data-target="#multi-item-example" data-slide-to="1" 
            style="background-image: url('https://i.stack.imgur.com/gE3mt.png') !important; 
            background-repeat: no-repeat !important;" class=""></li>
        <li data-target="#multi-item-example" data-slide-to="2" 
            style="background-image: url('https://i.stack.imgur.com/T90QU.png') !important;  
            background-repeat: no-repeat !important;" class=""></li>
    </ol>

然后，结果如下：