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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -