旋转木马在局部视图中只显示一张卡片？

Question

我已经使用下面的链接https://mdbootstrap.com/docs/jquery/javascript/carousel/创建了旋转木马，但是当它被放入局部视图时看起来并不好，为什么？在carosoul上只显示一张牌

​

Answer 1

也许这个问题与Bootstrap引用或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的多项转盘示例代码。

编辑

要在轮播底部的轮播指示器中显示页码，请执行以下操作。作为一种解决方法，您可以设置轮播指示器项的背景图像属性，代码如下(基于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>

然后，结果如下：

​

​