CODEWITHSUNDEEP
javascriptcssbootstrap-4carousel
Flotsam
Flotsam

Reputation: 61

How to change slides using Bootstrap Carousel?

I am creating a portfolio site and wish to have 2 distinct sections. The first being a simple introduction and the second being a carousel which I can populate with additional content like projects and what not. I have been able to implement both for the most part, however, I am unable to get my carousel to properly switched to the next item. The first time I click on either the next/prev icon my text shifts slightly down the page but then remains on the first slide and does not respond anymore.

In addition, I have noticed that prior to clicking on an indicator my address reads "LocalHost/src/index.html#". Then after clicking on an indicator I am given "LocalHost/src/index.html#myCarousel". I am unsure if that helps at all but I feel any additonal information would be useful.

I believe I have followed the bootstrap tutorial (as well as a separate tutorial) exactly, so I am completely clueless as to why I am having this issue. Any help would be greatly appreciated!

index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap & other CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="./index.css">
   
    <title>Attempted Portfolio</title>
  </head>
  <body>
    <div class="intro-container">
      <div class="container">
        <h1>
          My Name The
          <span class="txt-type" data-wait="3000" data-words ='["Developer", "Designer", "Creator"]'></span>
        </h1>
        <h2>Welcome to my website</h2>
      </div>
    </div>

<!-- Carousel -->
<div id="myCarousel" class="carousel slide" 
data-ride="carousel">

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

    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="container">
          <h1>First Headline</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna 
            aliqua. Luctus venenatis lectus magna fringilla urna. Libero 
            nunc consequat interdum varius. Egestas diam in arcu cursus
            euismod quis viverra. Nunc id cursus metus aliquam eleifend 
            mi in.</p>
        </div>
      </div>

      <div class="carousel-item">
        <div class="container">
          <h1>Second Headline</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna 
            aliqua. Luctus venenatis lectus magna fringilla urna. Libero 
            nunc consequat interdum varius. Egestas diam in arcu cursus
            euismod quis viverra. Nunc id cursus metus aliquam eleifend 
            mi in.</p>
        </div>
      </div>
    </div>

  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

      <script src="app.js"></script>
  </body>
</html>

index.css

@import url('https://fonts.googleapis.com/css?family=Raleway:200,100,400');

body {
    font-family: 'Raleway', sans-serif;
    height: 100vh;
    color: #fff5f7;
    overflow: scroll;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 3rem;
}

.intro-container {
  background: #ffb7c5;
  color: #fff8b7;
  height: 100vh;
}

.carousel-item {
  background-color: #fff0f2;
  color: #ffb7c5;
  height: 100vh;
}

h1, h2 {
    font-weight: 200;  
    margin: 0.4rem;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 1.5rem;
}

/* Cursor Animation */
.txt-type > .txt {
  border-right: 0.2rem solid #fff5f7;
}

@media(min-width: 1200px) {
 h1 {
     font-size: 3rem;
 }
}

@media(max-width: 800px) {
    .container {
        padding: 0 1rem;
    }

    h1 {
        font-size: 1.5rem;
    }
}

@media(max-width: 500px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1rem;
    }
}

Upvotes: 0

Views: 890

Answers (2)

Sujay
Sujay

Reputation: 606

To work just include this jQuery, Popper.js, and bootstrap js CDN and it will work.

Note that jQuery must come first, then Popper.js, and then our JavaScript plugins.

for more info click here

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

You can add these scripts in the head tag or at the bottom of the body.

Upvotes: 2

MrT
MrT

Reputation: 5

You forgot to add the CDN Bootstrap or link your bootstrap javascript at the bottom of the body.

Here:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Upvotes: 1

Related Questions