Question

我一直在为我的项目开发一个Bootstrap主题。我看到Carousel滑块有问题。我在这里读到了关于Carousel的问题和答案，但我的问题没有进展。当我将代码标记粘贴到代码标记之间时，我无法复制粘贴看不到的代码。

我从Bootstrap获得了滑块：http://getbootstrap.com/javascript/#carousel

问题是当我点击滑块上的下一页时，会看到链接

http://example.com/#carousel-example-generic

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>

之后没有任何反应。第一张幻灯片也没有转移到第二张幻灯片。

Answer 1

请检查网站是否已加载所有相关内容：

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这是一个工作示例，将其复制

http://codepen.io/anon/pen/pNRrPm

    <html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .carousel-inner > .item > img,
        .carousel-inner > .item > a > img {
            width: 100%;
            height: 500px;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="bs-example" data-example-id="simple-carousel">
    <div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
            <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active"><img alt="First slide [900x500]"
                                          data-src="holder.js/900x500/auto/#777:#555/text:First slide"
                                          src="http://i.imgur.com/CK3d6nV.jpg" data-holder-rendered="true"></div>
            <div class="item"><img alt="Second slide [900x500]"
                                   data-src="holder.js/900x500/auto/#666:#444/text:Second slide"
                                   src="http://i.imgur.com/SlHr4zn.jpg" data-holder-rendered="true">
            </div>
            <div class="item">
                <img alt="Third slide [900x500]" data-src="holder.js/900x500/auto/#555:#333/text:Third slide"
                     src="http://i.imgur.com/OAMaVRo.jpg" data-holder-rendered="true"></div>
        </div>
        <a href="#carousel-example-generic" class="left carousel-control" role="button" data-slide="prev"> <span
                    class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
                    class="sr-only">Previous</span> </a> <a href="#carousel-example-generic"
                                                            class="right carousel-control" role="button"
                                                            data-slide="next"> <span
                    class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span
                    class="sr-only">Next</span> </a></div>
</div>
</body>
</html>

Bootstrap Carousel Slider无法正常工作

1 个答案: