2016-12-04 82 views
-1

我正在开发此设计时,突然停止工作。旋转木马的完全一样,工作得很好。这是一个全屏bootstrap旋转木马。我用几个图书馆在我的代码一样parallax.js,wow.js,scrollTomin等Bootstrap Carousel不能正常工作

链接到该网站在转盘不工作: - http://theta.ipdev.in/Abh/

http://codepen.io/geekSiddharth/pen/XNZBpO

<!DOCTYPE html> 
<html class="no-js"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Abhyaanytar | Expresive Art Therapy</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="robots" content="all,follow"> 

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

    <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 

    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet"> 

    <link rel="stylesheet" href="css/ekko-lightbox.css"> 

    <link rel="stylesheet" href="css/custom.css"> 

    <link rel="shortcut icon" href="favicon.png"> 
    <link href="css/animate.css" rel="stylesheet" type="text/css"> 

    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
</head> 
<body data-spy="scroll" data-target="#navigation" data-offset="120"> 

<section id="intro" class="intro"> 

    <div id="mycarousel" class="carousel slide" data-ride="carousel"> 

     <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> 
      <li data-target="#mycarousel" data-slide-to="3"></li> 
      <li data-target="#mycarousel" data-slide-to="4"></li> 
     </ol> 


     <div class="carousel-inner" role="listbox"> 
      <div class="item"> <img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image"> 
       <div class="carousel-caption"> 
        <h3>First Image</h3> 
       </div> 
      </div> 
      <div class="item"> <img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image"> 
       <div class="carousel-caption"> 
        <h3>Second Image</h3> 
       </div> 
      </div> 
      <div class="item"> <img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image"> 
       <div class="carousel-caption"> 
        <h3>Third Image</h3> 
       </div> 
      </div> 
      <div class="item"> <img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image"> 
       <div class="carousel-caption"> 
        <h3>Fourth Image</h3> 
       </div> 
      </div> 
      <div class="item"> <img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image"> 
       <div class="carousel-caption"> 
        <h3>Fifth Image</h3> 
       </div> 
      </div> 
     </div> 


     <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 
</section> 

<header class="header"> 
    <div class="sticky-wrapper"> 
     <div role="navigation" class="navbar navbar-default"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" data-toggle="collapse" data-target=".navbar-collapse" 
          class="navbar-btn btn-sm navbar-toggle"><span class="icon-bar"></span><span 
          class="icon-bar"></span><span class="icon-bar"></span></button> 
        <a href="#intro" class="navbar-brand scroll-to"><img src="img/logo_small.jpg" alt="" height="40" 
                     width="56"></a></div> 
       <div id="navigation" class="collapse navbar-collapse navbar-right"> 
        <ul class="nav navbar-nav"> 
         <li><a href="#whoweare" id="yellow_light">Who We Are </a></li> 
         <li><a href="#whatwedo" id="green_light">What We Do</a></li> 
         <li><a href="#ourteam" id="red_light">Our Team</a></li> 
         <li><a href="#howtomeetus" id="blue_light">How To Meet Us</a></li> 
         <li></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</header> 

<section id="howtomeetus" style="background-color: #fff;" class="text-page"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h2 class="heading" id="blue_light"> How To Meet Us</h2> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-6"> 
       <form id="contact-form" method="post" action="#" class="contact-form"> 
        <div class="controls"> 
         <div class="row"> 
          <div class="col-sm-6"> 
           <div class="form-group"> 
            <label for="name">Your First Name *</label> 
            <input type="text" name="name" placeholder="Enter your First Name" 
              required="required" class="form-control"> 
           </div> 
          </div> 
          <div class="col-sm-6"> 
           <div class="form-group"> 
            <label for="surname">Your Last Name *</label> 
            <input type="text" name="surname" placeholder="Enter your Last Name" 
              required="required" class="form-control"> 
           </div> 
          </div> 
         </div> 
         <div class="form-group"> 
          <label for="surname">Your email *</label> 
          <input type="email" name="email" placeholder="Enter your email" required="required" 
            class="form-control"> 
         </div> 
         <div class="form-group"> 
          <label for="surname">Your message for us *</label> 
          <textarea rows="4" name="message" placeholder="Enter your message" required 
             class="form-control"></textarea> 
         </div> 
         <div class="text-center"> 
          <input type="submit" name="name" value="Send message" class="btn btn-primary btn-block"> 
         </div> 
        </div> 
       </form> 
      </div> 
      <div class="col-md-6"> 
       <p>Effects present letters inquiry no an removed or friends. Desire behind latter me though in. 
        Supposing shameless am he engrossed up additions. My possible peculiar together to. Desire so better 
        am cannot he up before points. Remember mistaken opinions it pleasure of debating. Court front maids 
        forty if aware their at. Chicken use are pressed removed. </p> 
       <p>Able an hope of body. Any nay shyness article matters own removal nothing his forming. Gay own 
        additions education satisfied the perpetual. If he cause manor happy. Without farther she exposed 
        saw man led. Along on happy could cease green oh. </p> 
       <p class="social"><a href="#" title="" class="facebook"><i class="fa fa-facebook"></i></a><a href="#" 
                              title="" 
                              class="twitter"><i 
         class="fa fa-twitter"></i></a><a href="#" title="" class="gplus"><i 
         class="fa fa-google-plus"></i></a><a href="#" title="" class="instagram"><i 
         class="fa fa-instagram"></i></a><a href="#" title="" class="email"><i 
         class="fa fa-envelope"></i></a></p> 
      </div> 
     </div> 
    </div> 
    </div> 
    </div> 
</section> 
<footer style="background-color: #111;" class="section-inverse"> 
    <div class="container"> 
     <div class="row copyright"> 
      <div class="col-md-12"> 
       <p>&copy;2016 Abhyaantar</p> 
      </div> 
     </div> 
    </div> 
</footer> 


<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script> 
<!-- Bootstrap CDN--> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<!-- jQuery Cookie - For Demo Purpose--> 
<script src="js/jquery.cookie.js"></script> 
<!-- Lightbox--> 
<script src="js/ekko-lightbox.js"></script> 
<!-- Sticky + Scroll To scripts for navbar--> 
<script src="js/jquery.sticky.js"></script> 
<script src="js/jquery.scrollTo.min.js"></script> 
<!-- google maps--> 
<script src="js/parallax.js"></script> 
<script src="js/wow.js"></script> 

<!-- main script--> 
<script src="js/front.js"></script> 
<script> 
    new WOW().init(); 
</script> 
</body> 
</html> 
+0

在最近的更改之前,JS控制台中是否存在任何错误? –

+0

Nopes .......... – iamSiddharthYadav

+0

链接到工作网站: - http://theta.ipdev.in/Abh/ – iamSiddharthYadav

回答

1

你需要活跃添加到在carousel.The活动类的第一张幻灯片应该蜜蜂加入到第一项目类或WH你需要首先看到的IChever滑块。

我已经分叉你的笔,新文件可以在这里找到。 codepen<div class="item active">