1

I am creating a homepage following the template on this website: https://startbootstrap.com/template-overviews/full-slider/ but I cannot get it to work properly. I am able to load all my images but when I preview the page the headers for each image are overlapping, the buttons are not working and the pictures are not displaying correctly (I see my first picture, then the footer and then my other two pictures are right after the footer).

Here's the for my index:

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="risorse/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link href="risorse/stili/starter-template.css" rel="stylesheet">
    <link href="risorse/stili/full-slider.css" rel="stylesheet">
</head>

and here's my slider inside the :

<!-- Full Page Image Background Carousel Header -->
    <header id="myCarousel" class="carousel slide">
        <!-- 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>

        <!-- Wrapper for Slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('risorse/immagini/slider_1.jpg');"></div>
                    <h2>Chiesa San Marco - Baucina</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the second background image using inline CSS below. -->
                <div class="fill" style="background-image:url('risorse/immagini/slider_2.jpg');"></div>
                <div class="carousel-caption">
                    <h2>Mostra Expo Canina 2016 - Baucina</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('risorse/immagini/slider_3.jpg');"></div>
                <div class="carousel-caption">
                    <h2>Paesaggio Siciliano</h2>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </header>

after the footer I have the following jquery function for the slider:

<script src="risorse/js/jquery.js"></script>
    <script src="risorse/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="risorse/jquery/jquery-3.1.1.min.js"><\/script>')</script>
    <script>
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
    </script>

Here's my starter-template CSS:

html {
  position: relative;
  height: 100%;
}

body {
  padding-top: 50px;
  /* Margin bottom by footer height */
  margin-bottom: 60px;
  height: 100%;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: black;
}

.footer p {
    margin: 10px 0;
}

and here's the full-slider CSS:

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

I have checked the console and I get this error: Uncaught TypeError: $(...).carousel is not a function. I am trying for a solution but nothing seems to be working, yet.

4

1 回答 1

1

尝试只加载一次 jquery 库。在引导之前仅加载一个版本的 jquery，对于 Bootstrap 3，我认为对 jQuery 的依赖项设置为 1.9.0 或更高版本

于 2017-01-29T15:51:53.003 回答