Bootstrap carousel (slider) problem

Question

This carousel is not working for some reason. Can't figure out why. Thankful for help. The carousel starts with the comment  and ends with the comment  That should be everything you need to help me out but I included all files because I'm sure the problem may be caused from somewhere else than the html and bootstrap. Thankfull for help!

          <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>

  <meta charset="utf-8">
  <title>
  </title>
  <link rel="stylesheet" type="text/css" href="../css/main.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>


  <body>


    <div class="container">
      <nav class="navbar navbar-expand navbar-dark bg-dark row justify-content-between fixed-top">

          <img class="logo col-1" src="../img/skisslogo.jpg">

        <div class="col-1 text-center">
          <h6>
            meny
          </h6>
        </div>


      </nav>
    </div> <!-- End header -->



      <div class="jumbotron jumbotron-fluid text-center">
        <h1 class="display-1"> Välkommen till SneakPeak </h1>
        <div class="container">
          <p class=""> Sneakpeak är en hemsida för dig som är nyfiken på den kristna tron, har frågor kring den kristna tron eller har hamnat på sidan av någon annan anledning. Här på SneakPeak är tanken
              att du ska få inspireras, få se vad Gud gör i världen och förhoppningsvis få svar på några frågor som du kanske undrar över. Den kristna tron har länge presenterats som lagisk, tråkig och "religös". Detta är inte sanningen om den kristna tron, den sanna kristna tron handlar om en personlig kärleksrelation med Gud själv. Det mest kraftfulla, uppfyllande och livsgivande som
              finns på denna planet. Vi ber att du ska få utmanas i dina tankar och få öppna upp dig att ta emot av den överväldigande kärleken som Gud har för dig. Han har skapat dig med ett syfte
              och Gud har en underbar plan för ditt liv. ENJOY! </p>
        </div>
      </div>




    <article id="fade1" class="my-5 text-center hiddenProp hidden">

      <div>
        <h2 class="display-2 mb-5"> Populärt </h2>
      </div>

      <div class="mb-5">
        <p> De mest populära klippen denna månad en blandning mellan Mirakler, Vittnesbörd och Svar på frågor. </p>
      </div>

      <!-- Bootstrap carousel för populärt -->

      <div class="container">
        <div class="row">
          <div class="col-sm-12">

            <div id="my-slider" class="carousel slide" data-ride="carousel">

              <!-- carousel indicators -->

              <ol class="carousel-indicators">
                <li data-target="#my-slider" data-slide-to="0" class="active"></li>
                <li data-target="#my-slider" data-slide-to="1"></li>
              </ol>



                <div class="carousel-inner">
                    <!-- slide 1 -->
                    <div class="carouel-item active">
                        <img src="../img/thumb-populärt.jpeg" alt="First slide">
                        <div class="carousel-caption">
                          <h1>Caption 1</h1>
                        </div>
                    </div>

                    <!-- sliode 2 -->

                    <div class="carousel-item">
                        <img src="../img/thumb-svarpåfrågor.jpeg" alt="Second slide">
                        <div class="carousel-caption">
                          <h1>Caption 2</h1>
                    </div>
                </div>

                <!-- Prev and next "buttons" -->
                <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left"> </span>
                  <span class="sr-only"> Previous </span>
                </a>

                <a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right"> </span>
                  <span class="sr-only"> Next </span>
                </a>




            </div> <!-- end my slider div -->

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




      <!-- End of bootstrap carousel för populärt -->

    </article>



      <article id="fade2" class="my-5 text-center hiddenProp hidden">

        <div class="mb-5">
          <h2 class="display-2"> Mirakler </h2>
        </div>


          <div class="container mb-5 fadeIn">
            <p> Mirakler är något som man hört om i sagohistorier man kan mirakler hända på riktigt? Det vi fokuserar på mest här på SneakPeak är Mirakler i form av helande. Helande
              var en naturlig del av Jesu vardag och vi som kristna är kallade att leva i detsamma. Ett helande handlar helt enkelt om att Guds kraft genom en människa
              mirakulöst återställer en kropsdel till dess orginala skick. Tänk dig en bilreperation fast övernaturligt och utan reservdelar ;).
              Poängen med helande är alltid Guds kärlek för individen och att han vill visa sitt goda hjärta mot oss genom andra människor. </p>
          </div>

          <div class="container-fluid justify-content-center pt-4 row">           <!-- container for the whole section-->
            <div class="col-4 d-none d-md-block mr-5">                            <!-- div for Titel and description of video that shows in the MD breakpoint or larger. -->
              <h2 class="mb-4 text-center"> Titel på video</h2>
              <h5 class="container fadeIn"> beskrivning av videon osv olor. Praesent scelerisque nisi risus, quis scelerisque neque varius eget. In velit enim, vulputate a malesuada pretium, ultricies sed nulla. </h5>
            </div>
            <div class="col-md-4">                                                <!-- div for Titel and description of video that shows in breakpoints lower than MD -->
              <h2 class="mb-4 d-md-none text-center"> Titel på video</h2>
              <img src="../img/thumb-mirakler.jpeg">
            </div>
            <a href="#">
              <h5 class="mt-4 offset-4 d-none">
                Se mer
              </h5>
            </a>
          </div>


      </article>



      <article id="fade3" class="my-5 text-center hiddenProp hidden">

        <div class="mb-5">
          <h2 class="display-2"> Vittnesbörd </h2>
        </div>


          <div class="container mb-5 fadeIn">
            <p> Vittnesbörd i sin definition betyder "Ett uttalat eller skrivet statement om att något är sant eller ett vittnesbörd är ett bevis på att något är sant.
                I denna del så kommer du få se olika personer dela sina personliga vittnesbörd om hur de har fått uppleva Gud eller andra vittnesbörd om vad Jesus har gjort.
                Att få höra någon annans genuina story är alltid inspirerande och ögonöppnande. </p>
          </div>

          <div class="container-fluid justify-content-center pt-4 row">           <!-- container for the whole section-->
            <div class="col-4 d-none d-md-block mr-5">                            <!-- div for Titel and description of video that shows in the MD breakpoint or larger. -->
              <h2 class="mb-4 text-center"> Titel på video</h2>
              <h5 class="container fadeIn"> beskrivning av videon osv bswulor. Praesent scelerisque nisi risus, quis scelerisque neque varius eget. In velit enim, vulputate a malesuada pretium, ultricies sed nulla. </h5>
            </div>
            <div class="col-md-4">                                                <!-- div for Titel and description of video that shows in breakpoints lower than MD -->
              <h2 class="mb-4 d-md-none text-center"> Titel på video</h2>
              <img src="../img/thumb-vittnesbörd.png">
            </div>
            <a href="#">
              <h5 class="mt-4 offset-4 d-none">
                Se mer
              </h5>
            </a>
          </div>


      </article>


      <article id="fade4" class="my-5 text-center hiddenProp hidden">

        <div class="mb-5">
          <h2 class="display-2"> Svar på frågor </h2>
        </div>


          <div class="container mb-5 fadeIn">
            <p> Att vara kristen handlar inte om att vara övertygad om att Gud är på riktigt eller att ha alla bevis framför sig. Den kristna tron handlar om att få ett personligt kärleksmötem
               med Jesus som sen leder in i en kontant käleksrelation med Gud själv. Trotts detta tror vi på SneakPeak att Svar på frågor är en väldigt viktig del. Att få svar på svårare frågor
               eller olika tankar som man har angående den kristna tron hjälper än att slappna av i att den kristna tron inte är baserad på massa galenskaper som skrevs för 2000år sedan.
                Det öppnar upp för att kunna lägga ner sina vapen och alla fördomar man har och faktiskt ödmjukt söka Gud för ett personligt möte med honom, vi hoppas ni tycker om denna del.</p>
          </div>

          <div class="container-fluid justify-content-center pt-4 row">           <!-- container for the whole section-->
            <div class="col-4 d-none d-md-block mr-5">                            <!-- div for Titel and description of video that shows in the MD breakpoint or larger. -->
              <h2 class="mb-4 text-center"> Titel på video</h2>
              <h5 class="container fadeIn"> beskrivning av videon osv bswolor. Praesent scelerisque nisi risus, quis scelerisque neque varius eget. In velit enim, vulputate a malesuada pretium, ultricies sed nulla. </h5>
            </div>
            <div class="col-md-4">                                                <!-- div for Titel and description of video that shows in breakpoints lower than MD -->
              <h2 class="mb-4 d-md-none text-center"> Titel på video</h2>
              <img src="../img/thumb-svarpåfrågor.jpeg">
            </div>
            <a href="#">
              <h5 class="mt-4 offset-4 d-none">
                Se mer
              </h5>
            </a>
          </div>


      </article>


    <div class="container-fluid">
      <footer class="row justify-content-between navbar sticky-bottom navbar-expand-sm bg-dark">


        <div class="col-xs-1 bg-info">
          &copy; All rights reserved
        </div>

        <div class="col-xs-1 text-center bg-info">
          <h6>
          Code by: Marvin Benno
          </h6>
        </div>


      </footer>
    </div>






    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="../JavaScript/javascript.js"></script>
  </body>
</html>

CSS

         body {
  padding-top: 125px; }

.logo {
  border-radius: 50%; }

.hiddenProp {
  transition: all 1.8s ease; }

.hidden {
  opacity: 0; }

article {
  height: 800px; }

JAVASCRIPT

var docElement = $(document);



docElement.scroll(function() {
  if (docElement.scrollTop() > 1 && $("#fade1").hasClass("hidden")) {
    $("#fade1").removeClass("hidden")

}});

docElement.scroll(function() {
  if (docElement.scrollTop() > 950 && $("#fade2").hasClass("hidden")) {
    $("#fade2").removeClass("hidden")

}});

docElement.scroll(function() {
  if (docElement.scrollTop() > 1670 && $("#fade3").hasClass("hidden")) {
    $("#fade3").removeClass("hidden")

}});

docElement.scroll(function() {
  if (docElement.scrollTop() > 2390 && $("#fade4").hasClass("hidden")) {
    $("#fade4").removeClass("hidden")

}});

Answer 1 · 2018-10-16T07:46:57Z

October 16, 2018 7:46am

Hello Marvin I've seen the reason why the carousel is not working. Please note the following issues: 1) There is a typo, an omission of 's' in the 'carousel-item' class. What you have there is 'carouel-item'. So endeavour to put the 's' to make a correct spelling of carousel. 2) Remember to put the Bootstrap JavaScript file cdn before your closing body tag. That file is required for the carousel to work properly.

I hope these two issues addressed will make your carousel to work properly.

Best regards, Tobechukwu

Welcome to the Treehouse Community

Looking to learn something new?

Marvin Benno

Marvin Benno

Bootstrap carousel (slider) problem

1 Answer

Tobechukwu Obitube

Tobechukwu Obitube

Marvin Benno

Marvin Benno