简体   繁体   中英

boostrap.js carousel not working

I'm trying to implement the Carousel. Right now, it doesn't switch between images.

What am I doing wrong?

<title>Carousel test</title> 

<link href="vid.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="jwplayer/jwplayer.js"></script>
<script type="text/javascript">


$(function(){
    $('#myCarousel').carousel({
    interval: 2000
    });
});

</script>


<div id="vidRecorderHolder"><span id="vidRecorderDIV"></span></div>

<div id="slideshowHolder"

    <div id="myCarousel" class="carousel slide">
     <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
     </ol>
        <div class="carousel-inner">
            <div class="active item"><img src ="pinkie_wall.jpg" width=400 height=300></div>
            <div class="item"><img src ="twi_wall.png" width=400 height=300></div>
            <div class="item"><img src ="rarity_wall.jpg" width=400 height=300></div>
        </div>
         <a class="carousel-control left" href="#myCarousel" data-slide="prev">(</a>
         <a class="carousel-control right" href="#myCarousel" data-slide="next">)</a>
    </div>
</div>

您在此行上缺少一个闭合的尖括号:

<div id="slideshowHolder"

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM