Question

我的轮播不会更改幻灯片。实际的轮播会在我的网站上打开，但是我无法单击向右或向左指示符来更改为其他幻灯片。我不确定自己在做什么错。我尝试更改我的Java脚本命令。我尝试删除并重新启动轮播，但是没有运气。

("carousel").carousel();

<!DOCTYPE html>

  <html lang="en">

  <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Home Page</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles/restaurantStyles.css" />

  <script>

  </script>
    <style>

      </style>


    </head>
    <body onload="alert('This website is best viewed with JavaScript enabled. Please check your settings to ensure JavaScript is enabled before proceeding');">
      <div class="container">
<div class="jumbotron jumbotron-fluid">

     
        <div id="carousel" class="carousel slide carousel" data-ride="carousel" style="width: 400px;">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src="images/newLoc.png" alt="newLoc">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="images/Seasonal.png" alt="Seasonal Menu">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="images/drink.png" alt="SG Brew">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
        </div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q81/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body>



<footer>
  <hr />
  <p> 305 Gray Street, Houston, TX, 77004 <br />
    713-555-6752</p>
    </footer>
</html>

Answer 1

这是您可以参考的引导轮播的简单示例

Codepen链接：Click me

h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}

.item{
    background: white;    
    text-align: center;
    height: 300px !important;
}

.carousel{
    margin-top: 20px;
}

.bs-example{
	margin: 20px;
}

.carousel.carousel-fade .item {
  opacity:0;
  filter: alpha(opacity=0); /* ie fix */
}

.carousel.carousel-fade .active.item {
    opacity:1;
    filter: alpha(opacity=100); /* ie fix */
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-interval="6500" data-ride="carousel">
    	<!-- 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>   
       <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item carousel-fade">
                <h2>Slide 1</h2>
                <div class="carousel-caption">
                  <h3>First slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item carousel-fade">
                <h2>Slide 2</h2>
                <div class="carousel-caption">
                  <h3>Second slide label</h3>
                  <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
                </div>
            </div>
            <div class="item carousel-fade">
                <h2>Slide 3</h2>
                <div class="carousel-caption">
                  <h3>Third slide label</h3>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>

Answer 2

您需要使用jQuery'$'和#来调用carousel()函数；

将("carousel").carousel();替换为$("#carousel").carousel();

Answer 3

首先，从您的代码中删除("carousel").carousel();，这不是必需的。

第二个是您需要在</div>完成之前完成两个</body>。

第三个是您必须在body内部定义页脚，现在它位于您的身体外部。

最后一个，您现在必须为所有外部文件使用正确的在线CDN，这会导致错误。

请按照以下代码片段进行详细了解。

<!DOCTYPE html>
<html>
<head>
	<title>Demo Page</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body onload="alert('This website is best viewed with JavaScript enabled. Please check your settings to ensure JavaScript is enabled before proceeding');">
	<div class="container">
		<div class="jumbotron jumbotron-fluid">
			<div id="carousel" class="carousel slide carousel" data-ride="carousel" style="width: 400px;">
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img class="d-block w-100" src="images/newLoc.png" alt="newLoc">
					</div>
					<div class="carousel-item">
						<img class="d-block w-100" src="images/Seasonal.png" alt="Seasonal Menu">
					</div>
					<div class="carousel-item">
						<img class="d-block w-100" src="images/drink.png" alt="SG Brew">
					</div>
				</div>
				<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>
	</div>
	<footer>
		<hr />
		<p> 305 Gray Street, Houston, TX, 77004 <br />
		713-555-6752</p>
	</footer>
</body>
</html>

我希望这个答案能满足您的所有要求并有助于解决您的问题。

谢谢...

如何使自举轮播滑动？

3 个答案: