Carousel not working with html

2019-09-06 03:27发布

站内问答 / HTML/CSS
1307 1 4

I am using carousel in my website but my code is not working. Can anyone please guide me and tell me if there is something wrong with the code? 

 <!DOCTYPE html>
 <html>
 <head>
 <title>Welcome to COMPEDDED. </title>
 <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <script>
    $(document).ready(function(){
    $('#myCarousel').carousel({
        interval: 2000
      });
    });   
 </script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >

  <link href="main.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 </head>


 <body>
  <div class="nav">
     <div class="row">

     <div class="col-md-2">

      </div>
      <div class="col-md-4">
        <ul class="nav nav-pills" >
         <li role="presentation" class="active"><a href="file:///home/tejvir/Compedded/test.html">Home</a></li>
          <li role="presentation" ><a href="file:///home/tejvir/Compedded/browse.html">Browse</a></li>
       </ul>   
     </div>
     <div class="col-md-4">

        <ul class="nav nav-pills" >
         <li role="presentation" ><a href="file:///home/tejvir/Compedded/signup.html">Sign Up</a></li>
        <li role="presentation" ><a href="file:///home/tejvir/Compedded/Login.html">Log In</a> </li>
         <li role="presentation" ><a href="file:///home/tejvir/Compedded/contactus.html">Contact Us</a></li>    
      </ul>
     </div>
        <div class="col-md-2">
         </div>
      </div>
      </div>
       <div id="myCarousel" class="carousel slide" data-ride="carousel">
       <!-- Indicators -->
        <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>

   <!-- Wrapper for slides -->
   <div class="carousel-inner">
          <div class="item active">
              <img src="file:///home/tejvir/Firefox_wallpaper.png" alt="firefox">
      <div class="container">
        <div class="carousel-caption">
          <h1>Example headline.</h1>
          <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <a class="btn btn-large btn-primary" href="#">Sign up today</a>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="file:///home/tejvir/1920x1080.png" alt="ubuntu">
      <div class="container">
        <div class="carousel-caption">
          <h1>Another example headline.</h1>
          <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <a class="btn btn-large btn-primary" href="#">Learn more</a>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="file:///home/tejvir/1920x1080.png" alt="example">
      <div class="container">
        <div class="carousel-caption">
          <h1>One more for good measure.</h1>
          <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"></a>

 </div>   

   <div class="learn-more">
     <div class="container">
      <div class="row">
 <div class="col-md-4">
    <h3> ST microelectronics  </h3>
    <p>  Compiler to compile different embedded codes </p>
    <p>
        <a href="http://www.tico-india.com"> See how to use this compiler </a>
    </p>
  </div>
  <div class="col-md-4">
          <h3> How a compiler works?  </h3>
          <p> Description Text. </p>
          <p> 
             <a href="http://www.facebook.com"> Link text. </a>
         </p>
     </div>  
     <div class="col-md-4">
           <h3> Reliability </h3>
           <p> From experienced engineers these compilers have been tested and verified several times.  </p>
          <p>
             <a href="http://www.google.com"> Learn more about reliability at Compedded </a>
          </p>
    </div> 
    </div>
    </div>
    </div>      


  </body>
  </html>

The problem is that the carousel is showing my the first image and the buttons for left and right. but it is not actually working. I mean the image is not sliding and even the buttons wont work. I am sure this is not the first time someone is having this problem. But i have tried reading the details of the framework from bootstraps website. And still i am not able to do what i need to do.

Thanks

1条回答
Melony?
2楼-- · 2019-09-06 04:04 
 <!DOCTYPE html>
 <html>
 <head>
 <title>Welcome to COMPEDDED. </title>
 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <script>
    $(document).ready(function(){
    $('#myCarousel').carousel({
        interval: 2000
      });
    });   
 </script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >

  <link href="main.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 </head>


 <body>
  <div class="nav">
     <div class="row">

     <div class="col-md-2">

      </div>
      <div class="col-md-4">
        <ul class="nav nav-pills" >
         <li role="presentation" class="active"><a href="file:///home/tejvir/Compedded/test.html">Home</a></li>
          <li role="presentation" ><a href="file:///home/tejvir/Compedded/browse.html">Browse</a></li>
       </ul>   
     </div>
     <div class="col-md-4">

        <ul class="nav nav-pills" >
         <li role="presentation" ><a href="file:///home/tejvir/Compedded/signup.html">Sign Up</a></li>
        <li role="presentation" ><a href="file:///home/tejvir/Compedded/Login.html">Log In</a> </li>
         <li role="presentation" ><a href="file:///home/tejvir/Compedded/contactus.html">Contact Us</a></li>    
      </ul>
     </div>
        <div class="col-md-2">
         </div>
      </div>
      </div>
       <div id="myCarousel" class="carousel slide" data-ride="carousel">
       <!-- Indicators -->
        <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>

   <!-- Wrapper for slides -->
   <div class="carousel-inner">
          <div class="item active">
              <img src="file:///home/tejvir/Firefox_wallpaper.png" alt="firefox">
      <div class="container">
        <div class="carousel-caption">
          <h1>Example headline.</h1>
          <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <a class="btn btn-large btn-primary" href="#">Sign up today</a>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="file:///home/tejvir/1920x1080.png" alt="ubuntu">
      <div class="container">
        <div class="carousel-caption">
          <h1>Another example headline.</h1>
          <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <a class="btn btn-large btn-primary" href="#">Learn more</a>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="file:///home/tejvir/1920x1080.png" alt="example">
      <div class="container">
        <div class="carousel-caption">
          <h1>One more for good measure.</h1>
          <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"></a>

 </div>   

   <div class="learn-more">
     <div class="container">
      <div class="row">
 <div class="col-md-4">
    <h3> ST microelectronics  </h3>
    <p>  Compiler to compile different embedded codes </p>
    <p>
        <a href="http://www.tico-india.com"> See how to use this compiler </a>
    </p>
  </div>
  <div class="col-md-4">
          <h3> How a compiler works?  </h3>
          <p> Description Text. </p>
          <p> 
             <a href="http://www.facebook.com"> Link text. </a>
         </p>
     </div>  
     <div class="col-md-4">
           <h3> Reliability </h3>
           <p> From experienced engineers these compilers have been tested and verified several times.  </p>
          <p>
             <a href="http://www.google.com"> Learn more about reliability at Compedded </a>
          </p>
    </div> 
    </div>
    </div>
    </div>      


  </body>
  </html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)