Adding more images to HTML carousel

How do I add mor images to existing carousel. This template only has one at the moment. And does it affect my CSS?

https://captureability.com/new/index.html

<div class="carousel-item">
                      <div class="img-box">
                        <img src="images/slider-img.jpg" alt="">
                      </div>

What have you tried so far that has not worked?

I never worked with cartels before

Thats good a choice. Cartels can be a dangerous group of people to work with

So, where did you get the code for what you have now? Im assuming you copied it from somewhere

1 Like

It’s a template I got online.

Is there documentation that goes with that? Its not the best idea to copy code that you’re not sure how it works. You just shared html, is there css that goes with this? Does it use anything like bootstrap? Theres a lot of info missing for us to really help

i down loading a template. normally i can edited for my personnel use. but i never seen carousels before.

body {
  font-family: "Poppins", sans-serif;
  color: #0c0c0c;
  background-color: #ffffff;
}

.layout_padding {
  padding-top: 90px;
  padding-bottom: 90px;
}

.layout_padding2 {
  padding-top: 45px;
  padding-bottom: 45px;
}

.layout_padding2-top {
  padding-top: 45px;
}

.layout_padding2-bottom {
  padding-bottom: 45px;
}

.layout_padding-top {
  padding-top: 90px;
}

.layout_padding-bottom {
  padding-bottom: 90px;
}

.heading_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.heading_container h2 {
  position: relative;
  font-weight: bold;
  margin-right: 10px;
}

.heading_container img {
  width: 30px;
}

/*header section*/
.hero_area {
  height: 98vh;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #ffffff;
}

.sub_page .hero_area {
  height: auto;
}

.header_section .container {
  padding: 0;
}

.header_section .nav_container {
  margin: 0 auto;
}

.custom_nav-container .navbar-nav .nav-item .nav-link {
  padding: 7px 20px;
  margin: 10px 15px;
  color: #000000;
  text-align: center;
  border-radius: 35px;
  text-transform: uppercase;
  font-size: 15px;
}

.custom_nav-container .navbar-nav .nav-item.active .nav-link, .custom_nav-container .navbar-nav .nav-item:hover .nav-link {
  background-color: #800020;
  color: #ffffff;
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

a:hover,
a:focus {
  color: initial;
}

.btn,
.btn:focus {
  outline: none !important;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.custom_nav-container .nav_search-btn {
  background-image: url(../images/search-icon.png);
  background-size: 22px;
  background-repeat: no-repeat;
  background-position-y: 7px;
  width: 35px;
  height: 35px;
  padding: 0;
  border: none;
}

.navbar-brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar-brand img {
  margin-right: 5px;
  width: 35px;
}

.navbar-brand span {
  font-size: 22px;
  font-weight: 700;
  color: #800020;
}

.custom_nav-container {
  z-index: 99999;
}

.navbar-expand-lg .navbar-collapse {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.custom_nav-container .navbar-toggler {
  outline: none;
}

.custom_nav-container .navbar-toggler {
  padding: 0;
  width: 37px;
  height: 42px;
}

.custom_nav-container .navbar-toggler span {
  display: block;
  width: 35px;
  height: 4px;
  background-color: #800020;
  margin: 7px 0;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-1 {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  margin: 0;
  margin-bottom: -4px;
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-2 {
  display: none;
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-3 {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin: 0;
  margin-top: -4px;
}

.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-1,
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-2,
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-3 {
  -webkit-transform: none;
          transform: none;
}

/*end header section*/
/* slider section */
.slider_section {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 2;
  color: #3b3a3a;
  padding-bottom: 90px;
}

.slider_section .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.slider_section .detail_box {
  color: #000000;
}

.slider_section .detail_box h1 {
  text-transform: uppercase;
  font-weight: bold;
}

.slider_section .detail_box p {
  margin-top: 20px;
}

.slider_section .detail_box a {
  display: inline-block;
  padding: 10px 40px;
  background-color: #800020;
  color: #ffffff;
  border-radius: 35px;
  margin-top: 35px;
}

.slider_section .detail_box a:hover {
  background-color: #800020;
}

.slider_section .img_container {
  border: 7px solid #800020;
  border-radius: 100%;
  overflow: hidden;
}

.slider_section .img_container div#carouselExampleContarols {
  width: 100%;
  position: unset;
}

.slider_section .img_container .img-box img {
  width: 100%;
}

.slider_section .carousel-control-prev,
.slider_section .carousel-control-next {
  top: initial;
  left: initial;
  bottom: 5%;
  right: 10%;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 100%;
  opacity: 1;
  background-repeat: no-repeat;
  background-size: 8px;
  background-position: center;
}

.slider_section .carousel-control-prev {
  background-image: url(../images/prev.png);
  background-color: #ffffff;
  -webkit-transform: translate(-85px, 30px);
          transform: translate(-85px, 30px);
}

.slider_section .carousel-control-next {
  background-image: url(../images/next.png);
  background-color: #800020;
  -webkit-transform: translate(-45px, 0);
          transform: translate(-45px, 0);
}

.service_section {
  text-align: center;
}

.service_section .heading_container {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.service_section .service_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 35px 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.service_section .service_container .box {
  margin: 25px 1%;
  -ms-flex-preferred-size: 31%;
      flex-basis: 31%;
  padding: 35px 25px 25px;
  border-radius: 15px;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  border-top: 15px solid transparent;
  overflow: hidden;
  -webkit-transition: all .1s;
  transition: all .1s;
}

.service_section .service_container .box .img-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 125px;
}

.service_section .service_container .box .img-box img {
  width: 90px;
}

.service_section .service_container .box .detail-box {
  margin-top: 25px;
}

.service_section .service_container .box .detail-box h5 {
  color: #800020;
  font-weight: 600;
  position: relative;
}

.service_section .service_container .box:hover, .service_section .service_container .box.active {
  border-top: 15px solid #800020;
}

.service_section .btn-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 25px;
}

.service_section .btn-box a {
  display: inline-block;
  padding: 10px 35px;
  background-color: #800020;
  color: #ffffff;
  border-radius: 35px;
}

.service_section .btn-box a:hover {
  background-color: #800020;
}

.about_section {
  background-color: #f3f0f6;
}

.about_section .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.about_section .img_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.about_section .img_container .img-box {
  border: 5px solid #800020;
  border-radius: 100%;
  overflow: hidden;
}

.about_section .img_container .img-box.b1 {
  width: 70%;
}

.about_section .img_container .img-box.b2 {
  width: 50%;
  margin-left: auto;
  margin-top: -12%;
}

.about_section .img_container .img-box img {
  width: 100%;
}

.about_section .detail-box {
  margin-right: 15%;
}

.about_section .detail-box p {
  margin-top: 25px;
}

.about_section .detail-box a {
  display: inline-block;
  padding: 10px 35px;
  background-color: #800020;
  color: #ffffff;
  border-radius: 5px;
  margin: 25px 0 45px 0;
}

.about_section .detail-box a:hover {
  background-color: #800020;
}

.blog_section .heading_container {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.blog_section .heading_container h2::before {
  background-color: #ffffff;
}

.blog_section .box {
  margin-top: 55px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}

.blog_section .box .img-box {
  position: relative;
}

.blog_section .box .img-box img {
  width: 100%;
}

.blog_section .box .detail-box {
  padding: 25px 25px 15px;
}

.blog_section .box .detail-box h5 {
  font-weight: bold;
}

.contact_section {
  position: relative;
}

.contact_section form {
  margin-top: 45px;
  padding-right: 35px;
}

.contact_section input {
  width: 100%;
  border: none;
  height: 50px;
  margin-bottom: 25px;
  padding-left: 25px;
  background-color: transparent;
  outline: none;
  color: #101010;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
}

.contact_section input::-webkit-input-placeholder {
  color: #737272;
}

.contact_section input:-ms-input-placeholder {
  color: #737272;
}

.contact_section input::-ms-input-placeholder {
  color: #737272;
}

.contact_section input::placeholder {
  color: #737272;
}

.contact_section input.message-box {
  height: 120px;
}

.contact_section button {
  border: none;
  display: inline-block;
  padding: 12px 45px;
  background-color: #800020;
  color: #ffffff;
  border-radius: 0px;
  margin-top: 35px;
}

.contact_section button:hover {
  background-color: #800020;
}

.contact_section .map_container {
  height: 100%;
  min-height: 325px;
}

.contact_section .map_container .map-responsive {
  height: 100%;
}

.footer_bg {
  background-image: url(../images/footer-bg.png);
  background-size: cover;
  background-position: top;
}

/* info section */
.info_section {
  background-color: #800020;
  color: #ffffff;
}

.info_section h6 {
  font-weight: bold;
}

.info_section .info_contact {
  margin-top: 60px;
  margin-bottom: 45px;
}

.info_section .info_contact .col-md-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.info_section .info_contact a {
  color: #ffffff;
}

.info_section .info_contact img {
  max-width: 100%;
  margin-right: 10px;
}

.info_section .info_form {
  margin: 0 auto;
  margin-bottom: 45px;
}

.info_section .info_form h4 {
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}

.info_section .info_form form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.info_section .info_form form input {
  background-color: #ffffff;
  border: none;
  -webkit-box-flex: 2.5;
      -ms-flex: 2.5;
          flex: 2.5;
  outline: none;
  color: #000000;
  min-height: 42.4px;
  padding-left: 15px;
}

.info_section .info_form form input ::-webkit-input-placeholder {
  color: #ffffff;
  opacity: 0.2;
}

.info_section .info_form form input :-ms-input-placeholder {
  color: #ffffff;
  opacity: 0.2;
}

.info_section .info_form form input ::-ms-input-placeholder {
  color: #ffffff;
  opacity: 0.2;
}

.info_section .info_form form input ::placeholder {
  color: #ffffff;
  opacity: 0.2;
}

.info_section .info_form form button {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: none;
  display: inline-block;
  padding: 10px 30px;
  background-color: #800020;
  color: #ffffff;
  border-radius: 0;
  font-size: 15px;
  text-transform: uppercase;
}

.info_section .info_form form button:hover {
  background-color: #800020;
}

.info_section .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.info_section .info_social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.info_section .info_social img {
  width: 35px;
  margin-right: 8px;
}

/* end info section */
/* footer section*/
.footer_section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

.footer_section p {
  color: #222222;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
}

.footer_section p a {
  color: #222222;
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html>

<head>
  <!-- Basic -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- Mobile Metas -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Site Metas -->
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />

  <title>Capture Ability</title>

  <!-- slider stylesheet -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css" />

  <!-- bootstrap core css -->
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

  <!-- fonts style -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="css/style.css" rel="stylesheet" />
  <!-- responsive style -->
  <link href="css/responsive.css" rel="stylesheet" />
</head>

<body>

  <div class="hero_area">
    <!-- header section strats -->
    <header class="header_section">
      <div class="container">
        <nav class="navbar navbar-expand-lg custom_nav-container ">
          <a class="navbar-brand" href="index.html">
           
            
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="s-1"> </span>
            <span class="s-2"> </span>
            <span class="s-3"> </span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="d-flex ml-auto flex-column flex-lg-row align-items-center">
              <ul class="navbar-nav  ">
                <li class="nav-item active">
                  <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="about.html">technology</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="service.html">inspirational stories</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="contact.html">Contact </a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </header>
    <!-- end header section -->
    <!-- slider section -->
    <section class=" slider_section ">
      <div class="container">
        <div class="row">
          <div class="col-md-6 ">
            <div class="detail_box">
              <h1>
                Capture Ability
              </h1>
              <p>
                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem
              </p>
              <a href="" class="">
                Contact Us
            </div>
          </div>
          <div class="col-lg-5 col-md-6 offset-lg-1">
            <div class="img_content">
              <div class="img_container">
                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                      <div class="img-box">
                        <img src="images/slider-img.jpg" alt="">
                      </div>
                    </div>
                    <div class="carousel-item">
                      <div class="img-box">
                        <img src="images/slider-img.jpg" alt="">
                      </div>
                    </div>
                    <div class="carousel-item">
                      <div class="img-box">
                        <img src="images/slider-img.jpg" alt="">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
               <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="sr-only">Next</span>
              </a>
            </div>

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


  <!-- service section -->
  <section class="service_section layout_padding">
    <div class="container">
      <div class="heading_container">
        <h2>
          Our Services
        </h2>
        <img src="images/plug.png" alt="">
      </div>

      <div class="service_container">
        <div class="box">
          <div class="img-box">
            <img src="images/s1.png" class="img1" alt="">
          </div>
          <div class="detail-box">
            <h5>
              Equipment installation
            </h5>
            <p>
              There are many variations of passages of Lorem Ipsum available,
            </p>
          </div>
        </div>
        <div class="box active">
          <div class="img-box">
            <img src="images/s2.png" class="img1" alt="">
          </div>
          <div class="detail-box">
            <h5>
              Windmill Energy
            </h5>
            <p>
              There are many variations of passages of Lorem Ipsum available,
            </p>
          </div>
        </div>
        <div class="box">
          <div class="img-box">
            <img src="images/s3.png" class="img1" alt="">
          </div>
          <div class="detail-box">
            <h5>
              Equipment Maintenance
            </h5>
            <p>
              There are many variations of passages of Lorem Ipsum available,
            </p>
          </div>
        </div>
        <div class="box ">
          <div class="img-box">
            <img src="images/s4.png" class="img1" alt="">
          </div>
          <div class="detail-box">
            <h5>
              Offshore Engineering
            </h5>
            <p>
              There are many variations of passages of Lorem Ipsum available,
            </p>
          </div>
        </div>
        <div class="box">
          <div class="img-box">
            <img src="images/s5.png" class="img1" alt="">
          </div>
          <div class="detail-box">
            <h5>
              Electrical Wiring
            </h5>
            <p>
              There are many variations of passages of Lorem Ipsum available,
            </p>
          </div>
        </div>
      </div>
      <div class="btn-box">
        <a href="">
          Read More
        </a>
      </div>
    </div>
  </section>
  <!-- end service section -->

  <!-- about section -->
  <section class="about_section layout_padding">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="detail-box">
            <div class="heading_container">
              <h2>
                About Us
              </h2>
              <img src="images/plug.png" alt="">
            </div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              in reprehenderit in voluptate velit
            </p>
            <a href="">
              Read More
            </a>
          </div>
        </div>
        <div class="col-md-6">
          <div class="img_container">
            <div class="img-box b1">
              <img src="images/about-img1.jpg" alt="" />
            </div>
            <div class="img-box b2">
              <img src="images/about-img2.jpg" alt="" />
            </div>
          </div>

        </div>

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

  <!-- end about section -->




  <!-- blog section -->

  <section class="blog_section layout_padding">
    <div class="container">
      <div class="heading_container">
        <h2>
          Blog
        </h2>
        <img src="images/plug.png" alt="">
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="box">
            <div class="img-box">
              <img src="images/blog1.jpg" alt="">
            </div>
            <div class="detail-box">
              <h5>
                Blog Title Goes Here
              </h5>
              <p>
                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="box">
            <div class="img-box">
              <img src="images/blog2.jpg" alt="">
            </div>
            <div class="detail-box">
              <h5>
                Blog Title Goes Here
              </h5>
              <p>
                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- end blog section -->



  <!-- contact section -->

  <section class="contact_section layout_padding">
    <div class="container ">
      <div class="heading_container">
        <h2>
          Contact Us
        </h2>
        <img src="images/plug.png" alt="">
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <form action="">
            <div>
              <input type="text" placeholder="Name" />
            </div>
            <div>
              <input type="email" placeholder="Email" />
            </div>
            <div>
              <input type="text" placeholder="Phone Number" />
            </div>
            <div>
              <input type="text" class="message-box" placeholder="Message" />
            </div>
            <div class="d-flex ">
              <button>
                SEND
              </button>
            </div>
          </form>
        </div>
        <div class="col-md-6">
          <div class="map_container">
            <div class="map-responsive">
              <iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyA0s1a7phLN0iaD6-UE7m4qP-z21pH0eSc&q=Eiffel+Tower+Paris+France" width="600" height="300" frameborder="0" style="border:0; width: 100%; height:100%" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- end contact section -->


  <!-- info section -->

  <section class="info_section layout_padding">
    <div class="container">
      <div class="info_contact">
        <div class="row">
          <div class="col-md-4">
            <a href="">
              <img src="images/location-white.png" alt="">
              <span>
                Passages of Lorem Ipsum available
              </span>
            </a>
          </div>
          <div class="col-md-4">
            <a href="">
              <img src="images/telephone-white.png" alt="">
              <span>
                Call : +012334567890
              </span>
            </a>
          </div>
          <div class="col-md-4">
            <a href="">
              <img src="images/envelope-white.png" alt="">
              <span>
                demo@gmail.com
              </span>
            </a>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-8 col-lg-9">
          <div class="info_form">
            <form action="">
              <input type="text" placeholder="Enter your email">
              <button>
                subscribe
              </button>
            </form>
          </div>
        </div>
        <div class="col-md-4 col-lg-3">
          <div class="info_social">
            <div>
              <a href="">
                <img src="images/fb.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <img src="images/twitter.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <img src="images/linkedin.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <img src="images/instagram.png" alt="">
              </a>
            </div>
          </div>
        </div>
      </div>

    </div>
  </section>

  <!-- end info section -->

  <!-- footer section -->
  <footer class="container-fluid footer_section">
    <div class="container">
      <div class="row">
        <div class="col-lg-7 col-md-9 mx-auto">
          <p>
            &copy; 2024 Capture Ability All Rights Reserved</p>

          
        </div>
      </div>
    </div>
  </footer>
  <!-- footer section -->


  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/bootstrap.js"></script>

</body>

</html>

there are images already in this carousel, can’t you add more following the same pattern?

i only see the one i replaced. but i’l look again now.

you don’t see these?

thank you. i just seen it as you sent it lol.

thanks everyone for the help.