How can I adjust the height of the carousel slider to fit the course section perfectly?

I am currently working on a new website that includes a carousel slider in one of its sections. I am trying to figure out how to make the slider fit within that section while still maintaining responsiveness. Any suggestions on how to achieve this?

I am using Bootstrap 4.3.1 and JQuery 3.4.1. I have previously attempted to adjust the slider's CSS to a percentage size, but the height of the slider still does not align properly with the section.

Here is a snippet of my index.html:

<div id="course" class="offset">
  <div class="col-12 narrow text-center">
    <h1>Rental Bachtiar Medan Hehe</h1>

    <div class="row">

      <div class="col-md-6">
        <div class="course-class">
           <iframe marginheight="1" marginwidth="1" scrolling="no" allowtransparency="true" src="sliderCarousel.html" seamless></iframe>
        </div>
      </div>

      <div class="col-md-6">
         <div class="course-class">
            <h3>Custom Animation</h3>
            <p>Animate.css and Waypoints.js allow for smooth animations scrolling down the site.</p>
         </div>
      </div>

    </div>

   </div>
</div>

Here is the code snippet for sliderCarousel.html:

<div id="demo" class="carousel slide text-center" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">

    <div class="carousel-item active">
      <img src="https://drive.google.com/uc?export=download&id=17MKwEHxWd-OCPx9P2LsTBBR0kNR__aCe" alt="Image - 1" >
      <div class="carousel-caption">
        <h3>Slide 1</h3>
        <p>Description for Slide 1</p>
      </div>
    </div>

    <div class="carousel-item">
      <img src="https://drive.google.com/uc?export=download&id=1m3O0HLyKQPO-MOFcSNtP4EqpenycEQaC" alt="Image - 2" >
        <div class="carousel-caption">
          <h3>Slide 2</h3>
          <p>Description for Slide 2</p>
        </div>
    </div>

    <div class="carousel-item">
      <img src="https://drive.google.com/uc?export=download&id=1NSeFxs2MXhLfCU14qtqnRWce8LPJC6bR" alt="Image - 3" >
      <div class="carousel-caption">
        <h3>Slide 3</h3>
        <p>Description for Slide 3</p>
      </div>
    </div>

  </div>

  <div class="control-prev">

    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
  </div>

    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>

</div>

Additionally, here is the relevant CSS snippet from style.css:

/*---------- COURSE SECTION ------------*/

#course .narrow{
  width: 90%;
  margin: 3.5rem auto;
  padding-top: .2rem;
}

/* Styling for buttons, headings, and paragraphs */

.narrow h1{
  font-size: 2.4rem;
}
.btn-secondary{
  border-width: medium;
  border-radius: 0;
  padding: .6rem 1.2rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  margin: 1rem;
  border-color: #1EBBAE;
  background-color: #1EBBAE;
  color: white;
}
.btn-secondary:hover, 
.btn-secondary:focus{
  border-color: #189582;
  background-color: #189582;
  color: white;
}
.course-class h3{
  font-size: 1.3rem;
  text-transform: uppercase;
  padding-bottom: .4rem;
  text-align: left;
}
.course-class p{
  font-size: 1.1rem;
  text-align: left;
}

/* Styling for embedding an iframe */

iframe[seamless] {
  border: none;
  overflow: hidden;
  width: 100%;
  height: auto;
}

I am hopeful that the output of index.html will display the slider in the course section with the correct height alignment. Thank you for any assistance!

Answer №1

Check out the code snippet below:

To display content on the full screen, add Container-fluid and ensure that your image sizes are consistent.

<!doctype html>
<html lang="en>

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous>

  <title>Hello, world!</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="text-center" style="margin-bottom:20px;">
          <h1>Rental Bachtiar Medan Hehe</h1>
        </div>
      </div>
      <div class="col-md-6">
        <div class="course-class">
          <div class="bd-example">
            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
              </ol>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="https://www.15five.com/blog/wp-content/uploads/2015/09/communication-technology-1280x700.jpg" class="d-block w-100" alt="...">
                  <div class="carousel-caption d-none d-md-block">
                    <h5>First slide label</h5>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                  </div>
                </div>
                <div class="carousel-item">
                  <img src="https://digitalsocial.eu/images/upload/2016/12/rideaustin-donations-rideshare-taxi-ban.jpg" class="d-block w-100" alt="...">
                  <div class="carousel-caption d-none d-md-block">
                    <h5>Second slide label</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                <div class="carousel-item">
                  <img src="https://reformedperspective.ca/wp-content/uploads/2018/05/familytechnology.jpg" class="d-block w-100" alt="...">
                  <div class="carousel-caption d-none d-md-block">
                    <h5>Third slide label</h5>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                  </div>
                </div>
              </div>
              <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="course-class">
          <h3>Custom Animation</h3>
          <p>Animate.css and Waypoints.js allow for smooth animations while scrolling down the site.</p>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous></script>
</body>

</html>

https://i.sstatic.net/bWcNz.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Supply a variety of values to jQuery

Recently, I created a loop to retrieve multiple rows from the database. Each row includes a link and a hidden input with a value of posting_id. Essentially, this functions similarly to a "like" button on Facebook. The hidden input stores the posting_id, wh ...

Unable to view initial column in Datatables

I am facing an issue with displaying a JSON object in a table using jQuery DataTables. The problem is that the first column is not showing up, even though I can see the data in the JSON object. Can anyone help me identify what might be wrong with my code? ...

Using Ajax to dynamically generate column headers in Datatables

Is there a way to create a header title from an ajax file? I've been trying my best with the following code: $('#btntrack').on('click', function() { var KPNo = $('#KPNo').val(); var dataString = & ...

My website, powered by Wordpress, is currently experiencing an issue with excessive whitespace being added to the bottom of the contact form 7 plugin. I am perplexed as to the cause of this issue and

Recently, I've come across an issue with my contact form 7 plugin, which has been integrated into the front-page.php file using the code below: <div id="contact" class="pad-section"> <div class="container"> <h1>Contact Us</ ...

In search of advice on the best web-based database management technology

I'm looking to create a prototype for a web-based database manager, similar to the desktop version in the image below, with specific features in mind. Initially, the schema will be provided through a flat file. Considering HTML5 as an option, I am a ...

What makes it possible for Vue v3 to handle variables that are undefined?

We are in the process of developing a web application that monitors analytical changes and updates them in real time. While this may not be crucial information, we thought it would be worth mentioning. If you visit Vue.js's official website at https: ...

Tips for Concealing PHP Undefined Error Messages Using Echo

I'm new to PHP and I'm attempting to display user information in a div after submission using the echo function. Here is my current code snippet: <label class="input-fields" name="cust-name"> Name <input type="text" id="cust[name]" ...

Caching HTML5 videos in Google Chrome

I am currently in the process of building a website and have successfully added an HTML5 video. However, I encountered an issue when attempting to change the video file in the background for users to upload a new one. Despite updating the video URL, Chro ...

Transition effects in CSS when hovering

I've run into an issue where I'm attempting to create a hover transition effect on a div when the mouse hovers over it. The idea is that hovering over the main div should trigger another div to appear above it, with a smooth transitioning effect. ...

Retrieve an integer value from an HTML form

I need to extract an integer value from an HTML form using Python. Here is the code I tried: form = cgi.FieldStorage() if not form.has_key("id"): error_pop("There is no id in this form","The format of the request is not correct") id = ...

Eliminate Dates from the Past - Jquery Datepicker

Currently, I am developing a booking system for my client. I have successfully disabled Sundays and Mondays (the days she is not open). However, I am now working on enhancing the functionality by blocking out past dates. Although I have written a function ...

ways to run php script based on screen resolution or size

I have 2 php files that I need to execute based on screen size. include_once('large.php'); include_once('small.php'); The condition is to run large.php when the screen size is greater than 992px, and small.php when the screen size is ...

Leveraging JavaScript to trigger onClick() functions for multiple buttons throughout a webpage

        While searching for solutions, I came across several articles with similar topics, but unfortunately, none of the proposed solutions worked. Please forgive me if it was due to my own error. Background I am assisting a client who is transition ...

Finding elements using XPath in Selenium

When using Firebug to inspect an input field I need to fill in, I found this code: <label for="form:composite:tabView:ssn">Fødselsnummer</label> In my selenium script, I tried the following: WebElement element = driver.findElement(By.xpath ...

Having trouble getting custom tabs in jQuery to function properly?

I am facing an issue with a simple script I have created. The script is supposed to display a specific div when a user clicks on a link, and hide all other divs in the container. However, when I click on the link, nothing gets hidden as expected. Even afte ...

Tips for transferring input data to a static HTML page

After successfully identifying a value in a table using jQuery, I am faced with the challenge of passing it to a static HTML page. How can this transition be achieved smoothly? $('.gobutton').bind('click', function(){ var value = $( ...

In the realm of asp.net mvc, JSON remains a mysterious and undefined

When working with ASP.NET MVC 3, I have encountered an issue regarding JSON in my AJAX calls. The application runs smoothly on my development machine when using Visual Studio. However, after publishing the same application and trying to access it through a ...

Tracking the number of form submissions on a PHP website

I am looking to add a counter feature to my website where every time a form is submitted, the count increases for all visitors. The starting number will be 0 and each form submission will increment the count. While I can manage the count using JS/jQuery w ...

Quarterly Date Selection Tool with jQuery

I attempted to utilize the Quarter datepicker from: http://jsfiddle.net/4mwk0d5L/1/ Every time I execute the code, I encounter this problem: Cannot set property 'qtrs' of undefined. I copied exactly what was in the jsfiddle, and included the sam ...

Make Fomantic-UI (Angular-JS) sidebar scroll independently

Is there a way to make a sidebar scroll independently of the content it pushes? Currently, my page is structured like this: -------------------------- |[button] Header | -------------------------- |S | Main content | |i | ...