html - 单击控件时轮播效果不起作用-6ren

html - 单击控件时轮播效果不起作用

转载作者：行者123 更新时间：2023-11-28 19:29:00

我在旋转木马中滚动效果时遇到问题。只是动画，简单的滚动工作，但动画没有。也许有人可以检查我的代码并修复 ^_^ 谢谢。图像在 class carousel-image-1(2,3) 的 css 中添加。我比较了官方 Bootstrap 站点上的示例以及我的代码中的所有示例。可能我没看出错误在哪里

.carousel-item {
  height: 450px;
}

.carousel-image-1 {
  background: url(https://source.unsplash.com/random/560x560);
  background-size: cover;
}

.carousel-image-2 {
  background: url(https://source.unsplash.com/random/560x560);
  background-size: cover;
}

.carousel-image-3 {
  background: url(https://source.unsplash.com/random/560x560);
  background-size: cover;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="/css/style.css">
  <title>Title</title>
</head>

<body>

  <!-- Showcase Slider-->

  <section class="showcase">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item carousel-image-1 active">
          <div class="container">
            <div class="carousel-caption d-none d-sm-block text-right mb-5">
              <h1 class="display-3">
                Heading One
              </h1>
              <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
                repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
              <a href="#" class="btn btn-danger btn-lg">Sign Up Now</a>
            </div>
          </div>
        </div>

        <div class="carousel-item carousel-image-2 ">
          <div class="container">
            <div class="carousel-caption d-none d-sm-block  mb-5">
              <h1 class="display-3">
                Heading Two
              </h1>
              <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
                repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
              <a href="#" class="btn btn-primary btn-lg">Learn More</a>
            </div>
          </div>
        </div>

        <div class="carousel-item carousel-image-3 ">
          <div class="container">
            <div class="carousel-caption d-none d-sm-block text-right mb-5">
              <h1 class="display-3">
                Heading Three
              </h1>
              <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
                repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
              <a href="#" class="btn btn-success btn-lg">Learn More</a>
            </div>
          </div>
        </div>
      </div>

      <a href="#myCarousel" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a href="#myCarousel" class="carousel-control-next" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>
  </section>

  <script src="http://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
 
</body>

</html>

最佳答案

您只需为 slider 指定高度 - 因为它默认为 0 像素高。 :-)

正如您在下面看到的，我刚刚添加了一个 400 像素的 min-height(您可以将其设置为任何您喜欢的值)，并且我还设置了一个随机背景，这样您就可以看到你的白色文本(因为它没有出现在你的例子中，但 slider 实际上在幕后工作。

.carousel-item {
  min-height: 400px;
  background-image: url('https://picsum.photos/1200/400');
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="/css/style.css">
  <title>Title</title>
</head>

<body>

  <!-- Showcase Slider-->

  <section class="showcase">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item carousel-image-1 active">
          <div class="container">
            <div class="carousel-caption d-none d-sm-block text-right mb-5">
              <h1 class="display-3">
                Heading One
              </h1>
              <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
                repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
              <a href="#" class="btn btn-danger btn-lg">Sign Up Now</a>
            </div>
          </div>
        </div>

        <div class="carousel-item carousel-image-2 ">
          <div class="container">
            <div class="carousel-caption d-none d-sm-block  mb-5">
              <h1 class="display-3">
                Heading Two
              </h1>
              <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
                repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
              <a href="#" class="btn btn-primary btn-lg">Learn More</a>
            </div>
          </div>
        </div>

        <div class="carousel-item carousel-image-3 ">
          <div class="container">
            <div class="carousel-caption d-none d-sm-block text-right mb-5">
              <h1 class="display-3">
                Heading Three
              </h1>
              <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
                repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
              <a href="#" class="btn btn-success btn-lg">Learn More</a>
            </div>
          </div>
        </div>
      </div>

      <a href="#myCarousel" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a href="#myCarousel" class="carousel-control-next" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>
  </section>

  <script src="http://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
 
</body>

</html>

关于html - 单击控件时轮播效果不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55456283/

文章推荐： javascript - 将两个变量相加得到 Nan

文章推荐： python - Twisted 试验、PYTHONPATH 和 sys.path

文章推荐： python - Flask Babel 的翻译接口(interface)

文章推荐： python - 使用 itertools 获取 set python 的所有分区

iPhone - 轮播
我在我的应用程序中使用开源 iCarousel 来实现轮播控件。我使用的轮播类型是 iCarouselTypeRotary 并且图像在这种类型中线性排列。但是，我需要图像像所附图像中的旋转木马一样带来
jQuery 3D 轮播？
有人看过像这样的 jQuery 3D 轮播教程吗？ http://web.enavu.com/demos/3dcarouselwip/ 没有给出来源，但想知道是否有人有关于如何连续圈出 DIV 并调整
WPF 轮播/旋转元素
我正在开发一种使用相机自动拍摄照片的软件。我希望用户能够设置照片间隔。我希望它看起来和工作起来像某种轮播。它应该是这样的: 当我滑动(或用鼠标拖动)时，它应该沿给定方向移动: 所选项目应始终位于中间
javascript - 轮播 - 停止横向滚动
抱歉问了个愚蠢的问题。我正在寻找带有按钮的旋转木马。我在 Bootply 上找到了这个模板，它完全符合我的要求。我在开发方面还很陌生。也许有人可以向我解释如何摆脱侧面滚动效果。我知道我必须向 Jav
用于表单元素的 JQuery 轮播
我正在寻找一个可以处理表单元素的 jQuery 轮播风格插件。这是我需要做的。我有三个表单元素:两个常规文本框和一个文本区域。还有两个按钮，上一个和下一个。单击下一步按钮时，文本框/文本区域会切
具有拖放功能的 jQuery 轮播
我想构建一个包含两个图像轮播的网页，并且我希望能够将图像从一个轮播拖动到另一个。我已经有了与 jCarouselLite 一起使用的图像轮播:它使用两个 UL 元素来指定轮播的图像。这工作得很好。
javascript - Bootstrap 轮播
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
PHP Bootstrap 轮播
我有这段代码可以从数据库中获取轮播图片或视频 $stmt = $con->prepare("SELECT * FROM `Main`"); $stmt->execut
带有图像功能的 jQuery 轮播
我需要做这个 slider ，我找到了一些代码并尝试了，但没有一个完全是 LIKE THIS .bloco03 img {
jquery - 轮播/幻灯片仅在移动设备上
我的任务是制作 3 张图片的轮播/幻灯片，只能在移动设备上使用。在桌面上，这些图像将显示在 3 列中。有没有一种方法可以自动转换，而无需我创建两个不同的模块并根据屏幕尺寸隐藏/显示一个？最佳答案你
具有不同元素位置的 Jquery 轮播
我需要在卡片轮播上创建这种效果。我使用 Owl Carousel ，我给了元素框阴影。但我坚持制作不同位置元素的效果，例如 3d 或任何名称。这是我想做的 http://www.awesomescr
javascript - 轮播 Bootstrap
我已经盯着这段相同的代码看了大约 4 个小时，并尝试观看一些不同的教程。问题是 slider 加载，有 3 张幻灯片的空间，但它只显示第一张幻灯片。所有图像加载良好(在浏览器中验证)，但轮播不会更改
javascript - 轮播 - 无法定位中心图像
我的 carouse/slider 有问题，我已经做到了，上一张和下一张图片每边各占 25%，中央图片占 50% 宽度。问题是我能够更改左右图像的背景，但我似乎无法将相同的颜色应用于中间图像。我已经尝
javascript - 如何将我的背景制作成自动幻灯片/轮播？
我想一次放 5 张图片作为页面的背景，即一张图片会显示一小段时间(比如每张一秒钟)，然后重复它们。我想知道有没有办法用 CSS 或 JS 来做到这一点？预先感谢您的帮助! 最佳答案这也许就是您正
jQuery 触摸可拖动响应滚动条/幻灯片/轮播？
我正在寻找一个支持触摸、可拖动、响应式 jQuery 滚动条/幻灯片/轮播/ slider ，用于显示水平可滚动项目列表(例如， eshop、最近将照片添加到数据库等)。它看起来类似于苹果应用程序商
javascript - 夹层中的 Bootstrap 轮播
我想要夹层画廊的 Bootstrap 轮播。基本上;我正在拉入所有图像，并且我想要单行三张图像轮播。这是我非常讨厌的一段工作代码；我真的很想让它适用于无限数量的图像。 {% if page.d
javascript - Rails Bootstrap 轮播
大家好，我有这段代码，我一直在为我的网站编写代码。我正在尝试实现一个轮播功能，其中一张图片在另一张图片之后滑动。我遇到的问题是图片不会滑动。这是我的代码在欢迎 Controller 的索引页面中的样子
javascript - 带有事件点的 jQuery 轮播
我正在构建一个简单的轮播，一旦用户水平滚动，事件点就会改变事件状态。但是，当我滚动时，jQuery 左侧位置返回值没有改变: li_left = li.position().left; // this
flutter 轮播 slider 将文本放置在图像下
我正在尝试将文本放在轮播 slider 中的图像下方，但现在文本出现在图像上，而不是下方。它看起来像这样: 但我希望它看起来像这样: 这是我的代码: final CarouselSlider aut
css - Bootstrap 轮播 - 如何只增加高度
我在使用 boostrap carousel 时遇到 CSS 问题我只是想让它更高，我已经尝试了几个 css 但没有任何效果。代码是在这个 jsFiddle 中，http://jsfiddle.ne

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 单击控件时轮播效果不起作用