2016-12-04 10 views
-1

突然動作を停止したときにこのデザインを開発していました。カルーセルとまったく同じように完璧に機能していました。これはフルスクリーンのブートストラップカルーセルです。あなたは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

作業中のWebサイトへのリンク: - http://theta.ipdev.in/Abh/ – iamSiddharthYadav

答えて

1

- :私は、parallax.jsのように私のコードでは、カルーセルが動作されていないウェブサイトへのscrollTominなど

リンクをwow.jsをいくつかのライブラリを使用しました最初項目クラスまたはWHに添加蜂べきcarousel.Theアクティブクラスの最初のスライドにアクティブを追加する必要がありますあなたが最初に見なければならないicheverスライダー。

私はあなたのペンをフォークし、新しいファイルはここにあります。 codepen<div class="item active">

関連する問題