堆栈内存溢出
  简体   繁体   English

引导轮播控件未响应

[英]bootstrap carousel controls not responding

 原文  2018-12-02 16:10:11  2   2    javascript/ jquery/ html/ css/ twitter-bootstrap

问题描述

This is a very common question, I'll post links to other answers below. 这是一个非常常见的问题，我将在下面发布指向其他答案的链接。

A minimal sample: https://jsfiddle.net/aq9Laaew/284188 最小样本： https : //jsfiddle.net/aq9Laaew/284188

html: HTML： 

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="main.js"></script>

    <div class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <center><p> First slide</p></center>
          </div>

          <div class="carousel-item">
            <center><p> Second slide</p></center>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
</body>
</html>

js: JS： 

$(function(){
    $('.carousel').carousel()
})

This creates a bootstrap carousel, the animation works, the carousel automatically switches between first and second slide. 这样就创建了一个自举轮播，动画生效，轮播在第一张幻灯片和第二张幻灯片之间自动切换。 But the controls don't do anything. 但是控件没有任何作用。

Here are similar SO posts: 这是类似的帖子：

I think that my setup is correct, I basically just pasted the carousel sample code into the bootstrap starter template . 我认为我的设置是正确的，我基本上只是将轮播示例代码粘贴到bootstrap 入门模板中 。

2 个解决方案

解决方案1
 1  2018-12-02 16:19:46

Seems to work fine. 似乎工作正常。 

<!doctype html>
    <html lang="en">
      <head>
        <title>Title</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      </head>
      <body>

        <div id="carouselId" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselId" data-slide-to="0" class="active"></li>
                <li data-target="#carouselId" data-slide-to="1"></li>
                <li data-target="#carouselId" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
                </div>
                <div class="carousel-item">
                    <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
                </div>
                <div class="carousel-item">
                    <img data-src="holder.js/900x500/auto/#666:#444/text:Third slide" alt="Third slide">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselId" 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="#carouselId" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
      </body>
    </html>

解决方案2
 0 已采纳  2018-12-02 16:22:20

If you visit the fiddle, you'll notice that the code works now. 如果您访问小提琴，您会注意到该代码现在可以使用了。 The reason is that carousel needs id="carouselExampleControls" . 原因是轮播需要id="carouselExampleControls" 。

With that id, everything is fine. 有了该ID，一切都很好。 If you remove it, it doesn't respond anymore. 如果删除它，它将不再响应。

The id is necessary, since the control items reference it: id是必需的，因为控制项引用了它： 

<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
</a>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Bootstrap Carousel没有回应 - Bootstrap Carousel Not Responding 轮播在启动时没有响应 - carousel is not responding on bootstrap Bootstrap Carousel控件不起作用 - Bootstrap Carousel controls not working 自举轮播控件 - Bootstrap Carousel Controls Bootstrap 轮播组件控件不透明 - Bootstrap carousel component controls are not transparent bootstrap carousel隐藏第一个和最后一个控件 - bootstrap carousel hide controls on first and last Bootstrap 轮播控件不改变活动类 - Bootstrap carousel controls not changing active class bootstrap 3.1.1轮播控件不起作用 - bootstrap 3.1.1 carousel controls don't work 为什么我在 Bootstrap 中的轮播控件不起作用？ - Why are the controls for my carousel in Bootstrap not functioning? 使用幻灯片动画Bootstrap Carousel控件。 - Animate Bootstrap Carousel Controls with the Slides.
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM