我在突然停止工作时正在开发此设计。旋转木马的工作完全很好。这是全屏幕引导旋转木马。我在代码中使用了几个库，例如parallax.js，wow.js，scrolltomin等
链接到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>©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>
您需要将 Active 添加到轮播的第一个幻灯片中。活动类应添加到第一个中 item 类或首先需要查看的任何滑块。
我已经分叉了您的笔，可以在此处找到新文件。Codepen <div class="item active">