单击引导程序转盘指示器时不会更改照片(）

bootstrap carousel indicators does not change photo when clicked ()

本文关键字：照片 引导程序 指示器 单击      更新时间：2023-12-23

我正在尝试对引导程序转盘进行编码，那里的照片会自动发生变化，但当我试图点击一张照片时，转盘底部的指示器和圆点不会改变照片。有人能帮忙吗？我试着到处找。

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>

您在：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>
相关文章：