Question

我正在使用Bootstrap 4，轮播似乎无法正常工作。我可以看到我的活动图像以及下一个和上一个图标，但是按图标时我无法更改幻灯片。

.carousel-inner img {
            width: 100%;
            height: 100%;
        }

 @* Image Slider  *@

        <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="~/Image/bg.jpg" alt="Clinic1" width="1100" height="500" />
                    <div class="carousel-caption ">
                        <h3>Clinic 1</h3>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="~/Image/bg.jpg" alt="Clinic2" width="1100" height="500" />
                    <div class="carousel-caption">
                        <h3>Clinic 2</h3>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="~/Image/bg.jpg" alt="Clinic3" width="1100" height="500" />
                    <div class="carousel-caption container-fluid">
                        <h3>Clinic 3</h3>
                    </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>

Answer 1

使用Dummyimg发芽器，并添加Bootstrap CSS, JS (Together with jQuery and all)似乎工作正常。

您检查图像路径了吗？

invalid

%YAML 1.2
---
scope: source.example
contexts:
  main:
    # A simple single-line comment scope capture for nice output
    - match: '(#).*\n?'
      captures:
        0: comment.line.number-sign.example
        1: punctuation.definition.comment.example
    # Just so we can apply a color to the letter s to know when it's "special"
    - match: 's'
      scope: entity.name.special
    # The set of things that can be valid escapes
    - match: '/[s/]'
      scope: constant.character.escape.example
    # If only s and / are valid escapes, make other escapes invalid, including
    # using a bare / with nothing following it.
    - match: '/[^s/ ]?'
      scope: invalid.illegal.escape.example

$('.carousel').carousel()

以防万一我添加了documentation中的JavaScript代码以强制执行该操作：

.carousel-inner img {
            width: 100%;
            height: 100%;
        }

我无法更改图片幻灯片

1 个答案: