Issues with functionality of Bootstrap carousel slider

Currently, I'm attempting to put together a Bootstrap carousel slider with indicators by referencing the Bootstrap code. The caption setup is functioning as expected, but I'm encountering issues with the slider itself.

The problems I'm facing are:

  1. The indicators are not displaying. Although the slider with controls is visible and operational, the height of the images cannot be adjusted.
  2. I'm unable to modify the image's height. Despite attempting to set it at around 80%, the adjustment doesn't seem to take effect.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper header {
  background-color: rgb(185, 144, 224);
  height: 15%;
}

header .container-fluid .navbar-brand {
...
</html>

To the custom-slider class, I've included an image and specified a height. However, altering the image's height seems to present a challenge. I've attempted to adjust the height to about 80%, but so far, unsuccessful.

Answer №1

It appears that you may be utilizing the carousel component from Bootstrap version 4 rather than version 5 as indicated in the CDN import. I experimented with this code snippet sourced from the Bootstrap version 5 documentation and it seems to be functioning correctly for me:

<main>
      <!-- image slider -->
      <div class="custom-slider">
        <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="https://images.unsplash.com/photo-1664574653006-4d7eb5f1a418?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>First slide label</h5>
                  <p>Some representative placeholder content for the first slide.</p>
                </div>
              </div>
              <div class="carousel-item">
                <img src="https://images.unsplash.com/photo-1661956602153-23384936a1d3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>Second slide label</h5>
                  <p>Some representative placeholder content for the second slide.</p>
                </div>
              </div>
              <div class="carousel-item">
                <img src="https://images.unsplash.com/photo-1671347020855-8f35d210ee9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>Third slide label</h5>
                  <p>Some representative placeholder content for the third slide.</p>
                </div>
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
      </div>
    </main>

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

What is the best way to input two distinct variables into the Firebase database?

I have encountered an issue while trying to upload two variables into my Firebase database. Only the first variable, newRoute, is being successfully uploaded while new User isn't getting uploaded. The setup of the Fire configuration for the entire web ...

Steps for incorporating the count() value in Django for web developmentTo embed the count() value while creating

I'm currently working on a web visual board project using Django. Here is the specific HTML section where I need to populate values from the database: <tbody> {% for obj in data_list %} <tr> <th>{{ ob ...

Angular integration of Jquery UI datapicker with read-only feature

Having trouble using ngReadonly within a directive, my code isn't functioning as expected: app.directive('jqdatepicker', function() { return { restrict: 'A', require : 'ngModel', link : functi ...

How can I retrieve the URL for a specific location on Google Maps using latitude and longitude coordinates?

Is it possible to generate a URL using latitude and longitude coordinates that will take me directly to a Google Maps page showing that location? For instance, consider the following sample code: var lat = 43.23; var lng = 114.08; var url = 'http:/ ...

Utilize WebGL to incorporate a mesh as a background image mask

Currently, I am faced with a challenge in WebGL that involves the following scenario: Picture a mesh positioned in front of the camera. This mesh does not have traditional shading, but its outline, or "silhouette," is utilized to display a background imag ...

How can I modify the CSS of every fourth element using jQuery?

Is there a way for jQuery to update the styling of every fourth item (div) within another div? I've been searching without success... Any guidance would be greatly appreciated :) ...

Using Angular 4 for HTML 5 Drag and Drop functionality

I have been working on integrating native HTML 5 drag & drop functionality into my angular application. While I have successfully implemented the drag and dragOver events, I am facing an issue with the drop event not firing as expected. Here is the snipp ...

Issue with ngShow not functioning when used within an HTML template

I'm struggling with displaying and hiding a div from a template on an HTML page. You can see a simple JSFiddle example here. app.directive('example', function () { return { restrict: 'E', template: '< ...

Utilizing gradient effects on table backgrounds with html/css

Trying to enhance my responsive table by adding a gradient background, but encountering an issue where the style being applied is repeating in every cell, creating a messy look. Here's the gradient I'm using: background: linear-gradient(to right ...

Tips on decoding the JSON response provided below

After making an ajax call, I am receiving the following JSON response: {"head":{"json":"{ 'rows': [ {'CustName' : 'JAMES', 'CustId' : 'Gans Communications'} , {'CustName' : 'JAMES', &ap ...

Ways to make an image wander aimlessly across a webpage while also spinning as it moves (with the help of jQuery or CSS)

I am working on making a div randomly move around a page. This is a related question Now, I have replaced the div with a picture like an "arrow" and I want it to randomly move while also pointing in the right direction by changing its rotation angle as i ...

What steps can I take to guarantee that both images and text adapt well to different screen sizes?

Is there a way I can organize my website to display 3 movies per row with the text centered relative to the image? Here is how it currently looks (the red box is just for reference, please ignore): https://i.stack.imgur.com/w2pgN.jpg Also, when I resize m ...

What is the alternative way to achieve this functionality in Javascript without relying on jQuery?

I am encountering some dependencies issues with jQuery that are preventing me from using it. However, I still need to find a way to make this work without relying on jQuery libraries. Do you have any suggestions on how to achieve this? $(document).ready ...

Injecting randomness into webpage backgrounds with Flickr API

How can I use the Flickr API to display a random photo tagged with "landscape" on my website? I've tried inspecting the HTML using Chrome DevTools, but no photo is showing up. What am I missing? $(document).ready(function() { $.getJSON("https:// ...

Determine the availability of a distant website through AJAX requests

My website runs PHP's cURL to check the online status of 5 different URLs, however, this process tends to slow down the page load time significantly, especially if one of the sites being checked is not working. Someone suggested using jQuery's a ...

Hide series in JQPlot by simply clicking on its legend name, while ensuring that the tooltip is always visible

Currently, I am utilizing JQPlot along with the legend plugin to allow for toggling the display of series by clicking on their legend names. legend: { show: true, placement: 'outsideGrid', renderer: $.jqplot.EnhancedL ...

Ways to increase the date by one month in this scenario

I am facing an issue with manipulating two date variables. One of the dates is set to last Friday by default, and I am attempting to add a month to this date using the code snippet below. However, it does not produce the desired result. var StartDate = ne ...

When attempting to click the submit button, the action of submitting a form using jQuery/AJAX is not functioning as expected

When attempting to submit a form using jquery/AJAX, my function does not get called when clicking on the submit button. The structure of my website is as follows: CarMenu.php <html lang="en"> <html> <head> <meta charset="ISO-8859- ...

Can you explain the purpose of using the "overlay" value in the "overflow" property?

Can someone please clarify the distinction between "overlay" and "auto" for me? Is the function of "overlay" similar to that of "auto"? ...

Boost the delay in the transition speed for hiding the Navbar while scrolling down with the help of Bootstrap

Hi there! I am currently learning HTML, CSS, and JS. I'm working on a homepage project using Bootstrap-5 and have successfully integrated a navbar. However, I've noticed that the navbar disappears too quickly when I scroll down. Is there a way to ...