Q:

Bootstrap 3: Full Slider not working. Uncaught TypeError: $(...).carousel is not a function

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.

A:

Try loading the jquery library only once.
Load just one version of jquery before bootstrap, For Bootstrap 3 there are dependencies on jQuery set to version 1.9.0 or high I think

