0
ブートストラップカルーセルを使用して、3個ではなく4個のアイテムを表示しようとしています。表示しようとしている4番目のアイテムが表示されません。以下は私のコードです。私が間違っていることを確認していない。私はどこを見ても答えを見つけることができない。ブートストラップカルーセルで3個以上のアイテムを表示させない
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Cyber Farms</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Cabin|Cormorant" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full-slider.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Cyber Farms</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li data-target="#myCarousel" data-slide-to="0" class="active">
<a href="#">Home</a>
</li>
<li data-target="#myCarousel" data-slide-to="1">
<a href="#">About</a>
</li>
<li data-target="#myCarousel" data-slide-to="2">
<a href="#">Services</a>
</li>
<li data-target="#myCarousel" data-slide-to="3">
<a href="#">Contact</a>
</li>
<li data-target="#myCarousel" data-slide-to="4">
<a href="#">Portfolio</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill Home-section">
<div class="overlay-home">
<div class="container">
<div class="row">
<div class="jumbotron">
<a href="#" class="btn btn first">Learn more</a>
<a href="#" class="btn btn second" data-open="exampleModal1">Contact us</a>
<h1 class="intro">Hi, I’m Mike Otis a free lance web developer.</h1>
<h3 id="main"> I build webpages in many ways. If you are looking to get a new web site or redesign a current website , or have some questions. You have come to the rite place. Check out the services I offer in the menu tab above or click on the Learn more button to see what I can do for you. No job is too small, no job is too big. 100% custom websites.</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill About-section">
<div class="about-overlay">
<div class="container about">
<div class="row about-row">
<div class="col-md-10 col-sm-12 col-xs-12">
<h1>Mike Otis Web debonair</h1>
<img src="profile.jpg" style="height: 250px; width: 250px;" class="img-responsive profile">
<h3>My name is mike otis and I build websites. I love building things on the web. Things move fast in this industry and I love the ever avolving technologys and how they develop. My passion is learning all things web development. I always make time to learn new things and perfect the skills that I have attained over the years. I mainly work with html css ruby on rails Jquery and content manegment systems like Wordpress joomla and drupal. I am available for hire now. If you need a website or have a project, send me a detailed message and I will get back to you shortly so we can get you the help you need. </h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill Services-section">
<div class="overlay-home">
<div class="container services-container">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<i class="fa fa-mobile fa-5x color icon"></i>
<h2 class="services-header">Mobile Friendly Websites</h2>
<p class="service-paragraph">Nowadays most people view websites from there phones or tablets. If your site needs to be seen on mobile devices you will want to make sure your site is mobile friendly. The websites I build can be seen across all devices. Do not miss out on oppurtunitys becasue your site is hard to navigate on a mobile device.</p>
</div>
<!-- /.col-lg-4 -->
<div class="col-md-4 col-sm-6 col-xs-12">
<i class="fa fa-code fa-5x color icon"></i>
<h2 class="services-header">E-Commerce</h2>
<p class="service-paragraph">An e-commerce site can take your business to the next level. Wether you have a small buiness or large buisness. It will open doors for you all over the world. Of course you are going to have some questions along the way and I will be there to walk you through the process and answer all of your questions. I have solutions that will give your customers the secure and intuitive shopping experience they deserve</p>
</div>
<!-- /.col-lg-4 -->
<div class="col-md-4 col-sm-6 col-xs-12">
<i class="fa fa-code fa-5x color icon"></i>
<h2 class="services-header">Content Management Systems</h2>
<p class="service-paragraph">Keep your website management in-house using a content management system customized for the needs of your business. Here are a few options for you. Each one is different in its own way. Follow the links to see what each one can do for you and your buiness. If you still have lingering questions after reading up on some of the content managment systems, feel free to contact me so we can get your buiness started on the rite path.</p>
<a href="#">WordPress</a>
<a href="#">Drupal</a>
<a href="#">Joomla</a>
<a href="#">Ruby On Rails</a>
</div>
<!-- /.col-lg-4 -->
<div class="col-md-4 col-sm-6 col-xs-12">
<i class="fa fa-support fa-5x color icon"></i>
<h2 class="services-header">Web Site Maintenence</h2>
<p class="service-paragraph">Do you need upadates to an existing website or changes made to a preexisting site. Do you want to move your site to another platform. I can help.</p>
</div>
<!-- /.col-lg-4 -->
<div class="col-md-4 col-sm-6 col-xs-12">
<i class="fa fa-html5 fa-5x color icon"></i>
<h2 class="services-header">SEO </h2>
<p class="service-paragraph">Ever wander how some pages pop up on the front page of your search engine? That's where the SEO thing comes into play. SEO (search engine optimisation) Make sure your website will be found when potential customers or clients search for your products and services via major search engines such as Google and Yahoo or Bing.</p>
</div>
<!-- /.col-lg-4 -->
</div>
<!-- /.row -->
</div>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill Contact-section">
<div class="container">
<div class="row">
<div class="span6">
<form>
<div class="controls controls-row">
<input id="name" name="name" type="text" class="span3" placeholder="Name">
<input id="email" name="email" type="email" class="span3" placeholder="Email address">
</div>
<div class="controls">
<textarea id="message" name="message" class="span6" placeholder="Your Message" rows="5"></textarea>
</div>
<div class="controls">
<button id="contact-submit" type="submit" class="btn btn-primary input-medium pull-right">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="copyright">
<p>Copyright © Mike Otis Web Debonair 2017</p>
</div>
<div class="social-links">
<ul>
<li><a href="mailto:[email protected]"><i class="fa fa-send"></i></a>
</li>
<li><a href="https://www.linkedin.com/in/mike-otis-4bb082118/"><i class="fa fa-linkedin"></i></a>
</li>
<li><a href="https://twitter.com/mike_otis1"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="https://github.com/mikeotis123"><i class="fa fa-github-square"></i></a>
</li>
<li><a href="https://plus.google.com/u/0/106404153135552282482"><i class="fa fa-google-plus"></i></a>
</li>
</ul>
</div>
</footer>
<!--End of Footer -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
pause: true,
interval: false //changes the speed
});
</script>