【问题标题】:Bootstrap Carousels not loading/displaying properly引导轮播未正确加载/显示
【发布时间】:2018-03-21 17:28:00
【问题描述】:

网站上的一切正常。我正在尝试实现引导轮播,但是它们没有滑动,我在 bootsnip 上尝试了一些示例,甚至官方网站上的示例也不起作用?有人知道为什么吗?我认为这可能是因为 javascript 链接,但它看起来不错?

HTML 代码

<!DOCTYPE html>
<html>

<head>
    <title>The Beckwood - Scunthorpe</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">

</head>

<body>
<div id="wrap">
    <div class="header-main">

        <nav class="navbar navbar-default">
            <div class="container">
                <a class="navbar-brand" href="index.html" >
                     <img src="assets/img/logo.png">

                </a>
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a id="activenav" href="index.html">HOME</a></li>
                         <li><a href="menu.html">MENU</a></li>
                          <li><a href="gallery.html">GALLERY</a></li>
                           <li><a href="about.html">ABOUT</a></li>
                            <li><a href="book.html">BOOK A TABLE</a></li>
                            <li><a href="contact.html">CONTACT</a></li>
                        </ul>

                    </div>
            </div>
        </nav>
        <div class="hero">
            <h1 id="welcome">Welcome to The Beckwood.</h1>
            <p>The Beckwood is a family run pub located in scunthorpe offering quality homemade food, carverys, events and live sports.</p>
            <div class="btn btn-primary"><a href="menu.html">View Menu</a></div>
            <div class="btn btn-primary"><a href="menu.html">Book a table</a></div>
        </div>
    </div>

</div>

<div class="container">
    <div class="intro">
        <h1> Quality Food, Drinks and Atmosphere! </h1>
        <p>Welcome to the Beckwood! Here at the beckwood we specialise in authentic home made dishes hand cooked by our chefs.<br> Not only do we offer beautiful food we also provide entertainment, live sports and great quality beer.<br> Not only do we offer beautiful food we also provide entertainment.</p>
    </div>
</div>


<!--about-->
  <section id="about">
    <div class="container">
      <div class="row">
        <div class="col-md-12 text-center marb-35">

        </div>
        <div class="col-md-1"></div>
        <div class="col-md-10">
          <div class="col-md-6 col-sm-6">
            <div class="about-info">
              <h2 class="heading">A small heading goes here</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero impedit inventore culpa vero accusamus in nostrum dignissimos modi, molestiae. Autem iusto esse necessitatibus ex corporis earum quaerat voluptates quibusdam dicta!</p>
               <h2 class="heading">A small heading goes here</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero impedit inventore culpa vero accusamus in nostrum dignissimos modi, molestiae. Autem iusto esse necessitatibus ex corporis earum quaerat voluptates quibusdam dicta!consectetur adipisicing elit. Libero impedit inventore culpa vero accusamus in nostrum dignissimos modi, </p>

            </div>
          </div>
          <div class="col-md-6 col-sm-6">
            <img id="beckwoodabout" src="assets/img/image1.jpeg" alt="" class="img-responsive">
          </div>
        </div>
        <div class="col-md-1"></div>
      </div>
    </div>
    <br>
  </section>
  <!--/about-->

  <div class="homebar">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 margin-b-30">
                        <h2>Our Carvery</h2>
                        <img id="carvpic"  src="assets/img/carvery.jpg"><br><br>
                        <div class="overflow-hidden">

                            <p>lorem ipsum and beckwood this is a test.lorem ipsum and beckwood this is a test.
                            lorem ipsum and beckwood this is a test.
                            lorem ipsum and beckwood this is a test.
                            lorem ipsum and beckwood this is a test.</p>
                            <button type="button" class="btn btn-warning"><a href="book.html">Book Now</a></button>
                        </div>
                    </div>
                    <div class="col-md-4 margin-b-30">
                        <h2>Events</h2>
                        <img id="carvpic"  src="assets/img/events.jpg"><br><br>
                        <p>lorem ipsum and beckwood this is a test.lorem ipsum and beckwood this is a test.
                            lorem ipsum and beckwood this is a test.
                            lorem ipsum and beckwood this is a test.
                            lorem ipsum and beckwood this is a test.</p>

                            <button type="button" class="btn btn-warning"><a href="book.html">Book Now</a></button>
                        <div class="overflow-hidden">


                        </div>
                    </div>
                    <div class="col-md-4 margin-b-30">
                        <h2>Function Room</h2>
                         <img id="carvpic"  src="assets/img/functionroom.jpg"><br><br>
                        <div class="overflow-hidden">
 <p>lorem ipsum and beckwood this is a test.lorem ipsum and beckwood this is a test.
                            lorem ipsum and beckwood this is a test.
                            lorem ipsum and beckwood this is a test.
                            lorem ipsum and beckwood this is a test.</p>
                            <button type="button" class="btn btn-warning"><a href="book.html">Book Now</a></button>

                        </div>
                    </div>
                </div>
            </div>
        </div>

<br><br>



<iframe id="maps"
  width="100%"
  height="300px"
  padding="0px"
  margin="0px"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=AIzaSyB0d_sYwCWD5owhYY4UYb-i7VlOOnx2_o4

    &q=The Beckwood,Scunthorpe" allowfullscreen>
</iframe>

<footer id="myFooter">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
                    <img id="footerlogo" src="assets/img/logo.png">



                </div>
                <div class="col-sm-4">
                    <h5>Opening Times</h5>

                             <p class="opening hours"></p>
                    <p>Tue-Thu ~ 12:00 - 23:00</p>
                    <p>Friday ~ 12:00 - 00:00</p>
                    <p>Saturday ~ 12:00 - 00:00</p>
                    <p>Sunday ~ 12:00 - 22:30</p>


                </div>
                <div class="col-sm-1">
                    <h5>Navigation</h5>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="menu.html">Menu</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="book.html">Book</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>

                <div class="col-sm-4">
                    <div class="social-networks">
                        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
                        <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
                        <a href="#" class="google"><i class="fa fa-instagram"></i></a>
                    </div>

<img class="center" src="assets/img/hygeine.png">


                </div>

            </div>
        </div>
        <div class="footer-copyright">
            <p>© 2018 The Beckwood.</p>
        </div>
    </footer>



<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script src="validator.js"></script>
<script src="contact.js"></script>

</body>

</html>

【问题讨论】:

  • 您是否检查过浏览器的开发者工具控制台是否有错误?
  • 另外,尝试多个浏览器。 IE经常有问题。你试过 Chrome 和 FF 吗?
  • 是的,我正在使用 chrome atm,我得到的唯一错误是无法加载资源:net::ERR_FILE_NOT_FOUND
  • 那么哪个文件没有找到??
  • 嗯,没说

标签: html css twitter-bootstrap slider carousel


【解决方案1】:

我相信你必须在&lt;head&gt;标签中导入Bootstrap和JS。

希望对你有帮助

【讨论】:

  • 不。阅读docs
  • @j08691 我注意到 Harry 在文件顶部导入 Bootstrap3,在底部导入 4。这会导致任何冲突的错误吗?
  • 有可能。
  • 嘿伙计们,这就是问题所在,我将我的 JavaScript 版本更改为与 bootstrap 相同的版本,它工作正常!感谢您的帮助
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-12-18
  • 2020-10-17
  • 1970-01-01
  • 1970-01-01
  • 2021-01-10
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多