bootstrap 旋转木马指示器在点击时不会改变照片 ()

Question

我正在尝试编写 bootstrap 旋转木马，那里的照片会像它们应该的那样自动更改，但是当我尝试单击一个时，指示器、旋转木马底部的点不会改变照片.谁能帮忙？我试着到处找。

jQuery 包含在 bootstrap.js 上方，但如果是这样，轮播不会更改照片，对吗？照片变了，但指标不工作，这很奇怪。

<head>
    <meta charset="utf-8">
    <title>Ag</title>
    <meta name="vievport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="bootstrap-3.3.6-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/own.css">
</head>
<body>
    <div id="sliderSyrenka" class="carousel slide" data-ride="carousel">
        <!-- INDICATORS-->
        <ol class="carousel-indicators">
            <li data-target="#sliderSyrenka" data-slide-to:"0" class="active"></li> 
            <li data-target="#sliderSyrenka" data-slide-to:"1"></li>
            <li data-target="#sliderSyrenka" data-slide-to:"2"></li>
            <li data-target="#sliderSyrenka" data-slide-to:"3"></li>
        </ol>

        <!-- WRAPPER FOR SLIDES-->
        <div class="carousel-inner" >
            <div class="item active">
                <img src="img/slider/slide0.jpg" alt="" >
            </div>
            <div class="item">
                <img src="img/slider/slide1.jpg" alt="" >
            </div>
            <div class="item">
                <img src="img/slider/slide2.jpg" alt="" >
            </div>
            <div class="item">
                <img src="img/slider/slide3.jpg" alt="" >
            </div>
        </div>
    </div>
</body>

Answer 1

你有一个语法错误：data-slide-to:

只需将 : 替换为 =，轮播指示器将完美运行:)

更正 carousel-indicators :

<!-- INDICATORS-->
    <ol class="carousel-indicators">
        <li data-target="#sliderSyrenka" data-slide-to="0" class="active"></li> 
        <li data-target="#sliderSyrenka" data-slide-to="1"></li>
        <li data-target="#sliderSyrenka" data-slide-to="2"></li>
        <li data-target="#sliderSyrenka" data-slide-to="3"></li>
    </ol>

bootstrap 旋转木马指示器在点击时不会改变照片 ()

bootstrap carousel indicators does not change photo when clicked ()

javascript

jquery

indicator

carousel

twitter-bootstrap