javascript - Bootstrap Carousel is not changing pictures or sliding -
my bootstrap carousel not changing pictures. it's not sliding automatically or allowing me choose picture. it's showing active picture @ given time.
<!--html code--> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>bootsrtap </title> <meta name="description" content="hello world"> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <!--my links--> <link href="css/boostrap.mincss" rel= "stylesheet"> <link href="css/styles.css" rel = "sylesheet"> <style > .grey{ background-color: #000; padding: 20px; } </style> </head> <body> <!--presumably problem is--> <div id= "mycaroussel" class = "carousel"> <ol class = "carousel-indicators"> <li data-target = "mycaroussel" data-slide-to = "0" class = "active"> </li> <li data-target = "mycaroussel" data-slide-to = "1"> </li> <li data-target = "mycaroussel" data-slide-to = "2"> </li> </ol> <div class= "carousel-inner"> <div class = "item "> <img src="ottawa_option.jpg" alt = "ottawa" class = "img-responsive"> </div> <div class = "item "> <img src="toronto_option.jpg" alt = "toronto" class = "img-responsive"> </div> <div class = "item active "> <img src="vancouver_option.jpg" alt = "vancouver" class = "img-responsive"> </div> <!--<div class= "row"> <div class= "well"> first row</div> <div class= "row"> <div class= "well">this second row</div> <div class= "row"> <div class= "well">this third row</div> --> </div> </div> <div class="grey"> <div class= "container"> <div class="well"> this</div> </div> <footer> <div class="container"> <hr> <p> <small><a href="http://facebook.com/askorama">like me</a> on facebook</small></p> <p> <small><a href="http://twitter.com/wiredwiki">ask whatever </a> on twitter</small></p> <p> <small><a href="http://youtube.com/wiredwiki">subscribe me</a> on youtube</small> </p> </div> <!-- end container --> </footer>
i tried fooling around adding jquery scripts , on, nothing yet seems work. stakcoverflow purpose
the source of pics not issue, can display them @ once, or individually, not carousel slide.
i think have missed add jquery , bootstrap.js.please follow "macro del valle"'s answer or can add them corresponding site.
then if want auto slide add slider class.
your code:
<div id= "mycaroussel" class= "carousel">
updated code:
<div id="mycaroussel" class="carousel slide" data-ride="carousel">
hope solve problem.
Comments
Post a Comment