javascript - Bootstrap Carousel Is Displaying All Images On Top of Each Other -
in head have
<head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=quicksand" rel="stylesheet"> <script src="jquery-3.2.1.js"></script> <script src="main.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> </head>
and carousel code looks this:
<section class="jumbotron"> <div class="container"> <div id="mycarousel" class="carousel slide" data-ride="carousel"> <!-- indicators --> <ol class="carousel-indicators"> <li data-target="#mycarousel" class="active" data-slide-to="0"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> <li data-target="#mycarousel" data-slide-to="3"></li> <li data-target="#mycarousel" data-slide-to="4"></li> </ol> <!-- wrapper slides --> <div class="carousel-inner"> <div class="item active"> <img src="planet-earth.jpg"> </div> <div class="item"> <img src="planet-earth.jpg"> </div> <div class="item"> <img src="planet-earth.jpg"> </div> <div class="item"> <img src="planet-earth.jpg"> </div> <div class="item"> <img src="planet-earth.jpg"> </div> </div> </div> </div> </section>
but images appeared stacked on top of each other.
in folder have:
- bootstrap.min.js
- jquery-3.2.1.js
- main.js
- main.js
- planet-earth.jpg
- star_home.html
- style.css
edit: i'm displaying page in google chrome. edit 2: changed head looks now. works make header have out of place. centers entire header , makes not extend ends of page. when use
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rhyon1irsvxv4nd0jutlngaslcjuc7uwjduw9svrlvryoopp2bwygmgjqixwl/sp" crossorigin="anonymous">
as bootstrap link (the optional bootstrap link) looks how want carousel doesn't work.
Comments
Post a Comment