css Bootstrap Image Slider插件不工作

rbpvctlc 于 3个月前发布在 Bootstrap

关注(0)|答案(1)|浏览(52)

所以我尝试使用Django构建一个网站，使用图像滑块旋转木马显示图像，但代码似乎不起作用。我不知道为什么。而不是旋转木马的图像堆叠在另一个顶部。

的数据
我的html：

<div class="section">
    <div class="container">
    <div class="row justify-content-between">
    <div class="col-lg-7">
        <div class="img-property-slide-wrap">
        <div class="img-property-slide">
        <img src="{{ object.image1.url }}" alt="Image" class="img-fluid">
        <img src="{{ object.image2.url }}" alt="Image" class="img-fluid">
        <img src="{{ object.image3.url }}" alt="Image" class="img-fluid">
        </div>
        </div>
    </div>
    </div>
</div>

字符串
My style.css：

.img-property-slide-wrap {
  position: relative; }
  .img-property-slide-wrap .tns-outer .tns-inner {
    padding-bottom: 100px !important; }
  .img-property-slide-wrap .tns-nav {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 40px;
    z-index: 2; }
    .img-property-slide-wrap .tns-nav button {
      background: none;
      border: none;
      display: inline-block;
      margin: 2px;
      position: relative; }
      .img-property-slide-wrap .tns-nav button:active, .img-property-slide-wrap .tns-nav button:focus {
        outline: none; }
      .img-property-slide-wrap .tns-nav button:before {
        position: absolute;
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.2);
        right: 0;
        -webkit-transition: .3s all ease;
        -o-transition: .3s all ease;
        transition: .3s all ease; }
      .img-property-slide-wrap .tns-nav button.tns-nav-active:before {
        background-color: #1f6f8b; }

型

css

来源：https://stackoverflow.com/questions/77719043/bootstrap-image-slider-carousel-not-working

1条答案

按热度按时间

6rvt4ljy1#

您的HTML标记在carousel中存在一些结构问题。请在引导文档中查看carousel示例。
https://getbootstrap.com/docs/4.0/components/carousel/
下面是代码的修正版本，它以carousel的形式显示图像。另外，不要忘记在HTML中包含 Bootstrap 所需的依赖项。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <title>Bootstrap Image Carousel</title>
  </head>
  <body>
    <div class="section">
      <div class="container">
        <div class="row justify-content-between">
          <div class="col-lg-7">
            <div id="imageCarousel" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img
                    src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg?auto=compress&cs=tinysrgb&w=1200"
                    class="d-block w-100"
                    alt="Image 1"
                  />
                </div>
                <div class="carousel-item">
                  <img
                    src="https://images.pexels.com/photos/36717/amazing-animal-beautiful-beautifull.jpg?auto=compress&cs=tinysrgb&w=1200"
                    class="d-block w-100"
                    alt="Image 2"
                  />
                </div>
                <div class="carousel-item">
                  <img
                    src="https://images.pexels.com/photos/247599/pexels-photo-247599.jpeg?auto=compress&cs=tinysrgb&w=1200"
                    class="d-block w-100"
                    alt="Image 3"
                  />
                </div>
              </div>
              <a
                class="carousel-control-prev"
                href="#imageCarousel"
                role="button"
                data-slide="prev"
              >
                <span
                  class="carousel-control-prev-icon"
                  aria-hidden="true"
                ></span>
                <span class="sr-only">Previous</span>
              </a>
              <a
                class="carousel-control-next"
                href="#imageCarousel"
                role="button"
                data-slide="next"
              >
                <span
                  class="carousel-control-next-icon"
                  aria-hidden="true"
                ></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>

字符串

赞(0）回复(0）举报 4个月前

我来回答

css Bootstrap Image Slider插件不工作

1条答案

相关问题

热门标签

最新问答