引导轮播滑块不工作-前端问题

Bootstrap Carousel Slider not working(引导轮播滑块不工作)

本文介绍了引导轮播滑块不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在为我的项目使用 Bootstrap 开发一个主题.如我所见，轮播滑块有问题.我在这里阅读了关于 Carousel 的问题和答案，但我的问题没有任何进展.当我将其粘贴到代码标记之间时，我无法复制粘贴看起来不好的代码.

I have been developing a theme with Bootstrap for my project. As I see there is something wrong with Carousel slider. I have read as much as questions and answers about Carousel here but there is no progress about my problem. I can't copy-paste the code that is seen not good when I paste it here between code tag.

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

I got the slider from Bootstrap: http://getbootstrap.com/javascript/#carousel

问题是当我单击滑块上的下一页时，可以看到链接

The problem is when I click next page on slider, the link is seen

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>

之后什么都没有发生.而且第一张幻灯片也没有移到第二张.

and nothing happens after that. And also the first slide is not moving to the second one.

推荐答案

请检查是否加载了站点中的所有依赖项:

Please check if have all depency in site loaded:

      <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>

这篇关于引导轮播滑块不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！