0

I am relatively new to css and bootstrap and I'm trying to implement a carousel into my angular web app. I copied the source code from the bootstrap site but am having a lot of difficulties aligning everything correctly. Also the image slides don't seem to be working as well - when I click on the prev or next arrow the page reloads and it goes to /#carouselExampleIndicators.

enter image description here

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="img fluid" src="../../assets/img/actual.png" alt="First slide" width="300" height="300">
        <div class="carousel-caption d-none d-md-block">
            <h5>text 1</h5>
            <p>...</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="img fluid" src="../../assets/img/image0.jpeg" alt="Second slide">
        <div class="carousel-caption d-none d-md-block">
            <h5>text 2</h5>
            <p>...</p>
        </div>
     </div>
      <div class="carousel-item">
        <img class="img fluid" src="../../assets/img/Picture1.png" alt="Third slide">
        <div class="carousel-caption d-none d-md-block">
            <h5>text 3</h5>
            <p>...</p>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
  </div>

Any styling/function advice would be appreciated - thanks!!

st123
  • 246
  • 3
  • 14

1 Answers1

0

It's a pretty easy fix! You have a few options. The class for an '''img-fluid''' has the dash - it's not separate. See below. Add it to each image. For the href, just do the same thing you did on the first image - src="" is where you put that photo address.

<img class="img-fluid" src="../../yourimage.jpg" />

Once you do that, your image will take up the entire page. I would recommending doing the following to the top of the carousel:

<div id="carouselExampleIndicators" class="carousel slide container" data-ride="carousel">

Add the class container to contain your image.

With that, the carousel looks great!

I'm not sure exactly how you are trying to build your site, but you could also play around with bootstrap column sizing (ie col-md-8 col-lg-6). Let me know if this is the help you were looking for, and I'm happy to clarify. Have a great day.

Grayson Bertaina
  • 171
  • 9
  • thanks for the help grayson! I've made the changes you've suggested - yet the only change that seems to occur is that the image and text block are now in a container like you said. The image doesn't change in size at all and I can't seem to align it in the center. Possibly a flexbox could solve this? – st123 Sep 24 '20 at 00:02
  • So even with img-fluid on each of the images, they don't take up their entire container? You also need to remove any size constraints you may have put on them like width="" and height="" for bootstrap to do its magic. – Grayson Bertaina Sep 24 '20 at 00:14