如何让这个旋转木马工作?

时间:2016-12-30 21:01:31

标签: jquery carousel

主要问题是它不会从幻灯片移动到幻灯片,我不知道左侧的灰色图像是什么。我需要它来移除那部分并使其从幻灯片流向幻灯片。



<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="restaurantStyles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
    body {
      background-color: lightblue;
    }
    .footer {
      background-color: white;
    }
    h3 {
      color:red;
      font-weight:bold;
      font-style: italic;
    }
    </style>
  </head>
    <body>
      <h1>The Melting Pot</h1>
      <h4>"The Original Fondue Restaurant"</h4>
      <div class="White">
      <hr>
      <ul class="nav nav-pills">
        <li role="presentation" class="active"><a href="Home_Page_v5.html"><span class="glyphicon glyphicon-home"></a></li>
        <li role="presentation"><a href="Menu_v5.html">Menu</a></li>
        <li role="presentation"><a href="Contact_Us_v5.html">Contact Us</a></li>
      </ul>
      <hr>
      </div>
      <br>
      <br>
      <center><img src="http://www.royal-amsterdam.com/synergy/HTL00605/images_public/HTL00605/table_restaurant.jpg" style="width:400px; height:150px">
      <br>
      <br>
      <p><align="center">The Melting Pot is the original fondue restaurant<br>where guests can enjoy several fondue cooking styles and a<br>variety of unique entrees, salads, and unforgettable desserts.</p>
      <p><align="center">But we are more than just a restaurant; we are a unique<br>destination offering a dining experience unlike any other. Our<br>fondue restaurant is perfect for the everyday occasion, from a<br>night out with friends or a romantic dinner with your special<br>someone to a promotion celebration with colleagues.</p>
      <p><align="center">Enjoy a wide range of seasonal and fixed menu items, and<br>you choose the way you want it all. Of course what is delicious<br>food without a selection of wines and craft beers to really make it great?</p>
      <p><align="center">No matter what the occasion or how many courses you<br>choose to partake in, The Melting Pot provides an unforgettable,<br>interactive dining experience that turns moments into memories. From<br>the time the first piece of bread is dipped to when the last nibble<br>of dessert is savored, you'll have the time to discover new things<br>about people you thought you knew, and those you're getting to know.</p>
      <br>
      <br>

      <div class="container">
      <div class="col-xs-8 col-xs-offset-2">
      <div class="carousel slide" id="myCarousel" data-ride="carousel">


        <!--Indicator -->
        <ol class="carousel-indicators">
          <li class="active" data-slide-to="1" data-target="#myCarousel"></li>
          <li data-slide-to="2" data-target="#myCarousel"></li>
          <li data-slide-to="3" data-target="#myCarousel"></li>
        </ol>

        <!--Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active" id="slide1">
            <img src="https://www.meltingpot.com/files/2777/slider-locations.jpg">
            <div class="carousel-caption">
              <h3>We're opening a new location!</h3>
            </div><!-- end carousel -caption-->
          </div><!-- end item-->

          <div class="item" id="slide2">
            <img src="http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2014/12/four-seasons-930x781.jpg">
            <div class="carousel-caption">
              <h3>We're rolling out our seasonal menu, with special options for this season.</h3>
            </div><!-- end carousel -caption-->
          </div><!-- end item-->

          <div class="item" id="slide3">
            <img src="http://thebrooklynitesa.com/wp-content/uploads/bfi_thumb/KeepMeWild-1024x681-m9rzk18m9i79xhgr6zr0hakjc2lykcqj65upkjs034.jpg">
            <div class="carousel-caption">
              <h3>Web Hosting 101</h3>
            </div><!-- end carousel -caption-->
          </div><!-- end item-->
        </div><!-- carousel-inner -->

        <!-- Left and right controls -->
        <a class="left carousel-control" data-slide="prev" href="#myCarousel" role="button">
          <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><!-- end myCarousel -->
    </div><!-- end col-xs-8 -->
  </div><!-- end container -->

      <div class="footer">
      <hr>
      <div style="clear:left; padding-left:30px; color:purple; font-family:monospace">
        80 S 9th St, Minneapolis, MN 55402
        (612) 338-9900
      </div>
      <hr>
      </div>
    </body>
  </html>
&#13;
&#13;
&#13; What it currently looks like

1 个答案:

答案 0 :(得分:0)

  1. 您的旋转木马栏不在一排。
  2. 你有一个8 col网格,有2个单元格的偏移量 - 它不会累加到完整行所需的12行。 (8 + 2偏移= 10个单元格)
  3. 左侧的框是控件叠加层。每一侧应该有一个覆盖照片 - 但你的网格缺少一行和正确的列数,所以对齐都被顶起。