Issues with Bootstrap Carousel Fade Transition and Button Controls inoperable

I am currently exploring the creation of a carousel on bootstrap that transitions smoothly between three images (specifically 3 'gorilla' jpgs). However, I am encountering some challenges while learning HTML.

Challenge 1: The carousel is not transitioning between these images even though the class is set to "carousel slide carousel-fade".

Challenge 2: The button classes at the bottom are showing the text Previous and Next but I require them to display icons instead of text. Attempts to hide the text do not reveal the icons.

I am new to this field, so any assistance would be greatly appreciated!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b1914140f080f091a0b3b4e554b554b56191e0f1a48">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    
  
</head>

<body>
<div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true"
        aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active" data-bs-interval="3000">
        <img src="http://placehold.jp/150x150.png" 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" data-bs-interval="3000">
        <img src="http://placehold.jp/50x50.png" 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" data-bs-interval="3000">
        <img src="http://placehold.jp/100x100.png" 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="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </button>
  </div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0d2dfdfc4c3c4c2d1c0f0859e809e809dd2d5c4d183">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>

</html>

htmlcss

Answer №1

If you want the fade effect to work as desired, you'll need to incorporate additional CSS.

Since StackOverflow's code snippet preview doesn't display it well, you might have better luck checking out this Codepen.

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

  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73111c1c07000701120333465d435d435e1116071240">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6964647f787f796a7b4b3e253b253b26696e7f6a38">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
    crossorigin="anonymous"></script>

  <style>
    .carousel.carousel-fade .carousel-item {
        opacity: 0;
        transition: opacity ease-out .7s;
    }

    .carousel.carousel-fade .carousel-item.active {
        opacity: 1;
        transition: opacity ease-out .7s;
    }
  </style>

</head>

<body>

  <div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true"
        aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active" data-bs-interval="3000">
        <img src="https://source.unsplash.com/random/400x300?a" 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" data-bs-interval="3000">
        <img src="https://source.unsplash.com/random/400x300?b" 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" data-bs-interval="3000">
        <img src="https://source.unsplash.com/random/400x300?c" 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="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </button>
  </div>

</body>

</html>

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

Learn the technique of swapping out a portion of a string with a value from an input field in real-time

My webpage has a form on the left side where users can input text, and on the right is some static text. I want the text on the right to update automatically as the user types in the input field on the left. In my HTML code, it looks something like this - ...

javascriptjqueryhtml

The concept of CSS "preload" animation

When working with CSS, I encountered an issue with lag while loading 24 different mask images for a transition effect. To address this, I tried using a div called "preload" to cache the images and prevent lag on playback: <div class='trans' s ...

javascriptcss

PHP - Unexpected behavior while using a switch statement for auto-incrementing variable inside a while loop

Can anyone assist me with this problem? I am currently testing a switch statement inside a while loop that compares values. The loop should end once a specific value reaches the limit $numRow, stopping the execution of the remaining code. Here is my code ...

phphtmlwhile-loopswitch-statement

Can you explain the mechanics behind Google Voice Search? And is there an available API for it?

Is this the right place to ask how the voice-activated search feature on Google's homepage functions? I'm curious about whether it utilizes Flash, a plugin integrated into Google Chrome, or some other method to access the microphone. The idea of ...

javascripthtmlvoice-recognition

One crucial factor to consider when dealing with dual screen setups is the

Imagine you have the following code snippet : <ul> <li>Menu1 <ul class="submenu"> <li class="firstmenu">submenu-1</li> <li>submenu-2</li> < ...

jqueryhtmlcss

Smoothly transition between the new and existing child elements in a React component with a

Currently, I am utilizing a React component that renders a child element through props.children. The content within this child element varies dynamically. I am looking for the most effective method to smoothly transition (fade out the old element and fad ...

javascriptcssreactjs

What is the best way to include an icon in a Vue child component?

Struggling to implement the image in the template using both the img tag and as a background. Despite having the correct path to the icon, neither method seems to work. Check out the code snippet here <div> <a href="#" class="icon" > ...

cssvue.jsimportsassvuejs2

Guide to dynamically updating a textarea in vue.js by incorporating data from several inputs

Is there a way to update a textarea based on multiple inputs using jQuery and vue.js? I have successfully implemented the jQuery part with line breaks, but when I try to display the value of the textarea elsewhere using vue.js, it doesn't seem to work ...

javascriptjqueryhtmlvue.js

Using media queries within specific CSS classes

I am attempting to create the following CSS code: .myClass { @media all (max-width: 1024px) { left: 33%; } @media all (min-width:1025px) { left: 25%; } } Unfortunately, it doesn't seem to be working as expected. Is t ...

css

Switching from HTML to BBCode during the editing process

My issue lies in converting BBCode to HTML and then editing the code on a page with AJAX. When editing in a <textarea>, the HTML tags show up instead of the original BBCode. For instance, if I submit [b]bold text[/b] and save it to my database, the ...

javascriptphphtmlajax

What is the process for incorporating ejs into the source attribute of an image element?

Code Snippet: <img class="card-img-top" alt="..."><%= articles.image %><img> Server Setup: const express = require('express') const app = express() const router = require('./routes/article') app ...

javascripthtmlnode.jsejs

Change the Background of Your Body?

Here's the deal. I'm looking to create a cool effect where the background of the body slowly fades out and changes periodically in a loop using CSS and jQuery. Any suggestions on how I can make this happen? Appreciate your help! ...

javascriptjquerycssbackgrounddocument-body

Ways to style CSS for inactive checkboxes?

How can I easily change the CSS for disabled checkboxes in a grid to make them more visible for users? Technologies I prefer to use, ranked from most preferred to least: CSS JavaScript jQuery Other ...

htmlcsscheckbox

Overlapping borders in Bootstrap 4 design

Working on my project with Bootstrap 4 and encountered a coding issue. Here is the code snippet: .form-info-tab { border: 1px solid #ccc; border-collapse: separate; border-spacing: 0px; padding:5px; text-align:center; } <link ...

htmlcssbootstrap-4

Troubleshooting collapsing problems in Bootstrap 5.2 using Webpack and JavaScript

I am currently developing a project utilizing HTML, SASS, and JS with Webpack 5.74.0. My goal is to implement a collapsible feature using Bootstrap 5, however, I ran into some issues while trying to make it work. To troubleshoot, I attempted to direct ...

javascripthtmlwebpackbootstrap-5

Tips on generating an HTML element using JavaScript and storing it in a MySQL database

I need help with saving a created element to the database so that it remains on the page even after refreshing. Any assistance would be greatly appreciated. Thank you. document.getElementById("insert").onclick = function(){ if(document.getElementById( ...

javascriptjqueryhtmlmysql

The jquery selector fails to retrieve all elements

On the upcoming web page, I am attempting to use Jquery to select all <li> elements. Specifically, I want to target all the products contained within <ul class=search-result-gridview-items">. You can find the products here: I have made attempt ...

javascriptjqueryhtmlcss

When clicking on an image, it triggers a unique PHP query, however the results obtained are not accurate

Greetings, I have a search feature on my website. When a user inputs a keyword and clicks the search button, it directs them to jobsearch.php which then displays a list of relevant jobs from the MySQL database. The functionality is working perfectly. Howe ...

phphtmlmysql

The height of the div element is causing issues for the adjacent item in the row

I am facing a styling issue where the height of my avatar image is affecting other inline items located next to it. The images below demonstrate this problem. As you can see, when I increase the height of my avatar logo, it causes the navigation links to ...

css

Animating distance with the power of animate.css

I have implemented animate.css for a login form, but it is not behaving as desired. Currently, I am utilizing the fadeInDown animation, however, it is fading in from a greater distance than intended. I would prefer it to fade in from just around 20px below ...

htmlcssanimationanimate.css