Difficulty with Bootstrap Carousel (image is displayed but fails to transition/change)

Although I don't have much experience in this, I've searched through various documentations and solutions that have helped others. Unfortunately, I haven't been able to fix my issue, so I decided to create my own post to seek assistance.

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

    <!--Indicator Buttons-->
    <ol class="carousel-indicators">
        <li data-target="#randomCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#randomCarousel" data-slide-to="1"></li>
        <li data-target="#randomCarousel" data-slide-to="2"></li>
    </ol>

    <!--Carousel w/Images-->
    <div class="container">
        <div class="carousel-inner">

            <!--ALL PICS ARE PART OF CREATIVE COMMONS; ADDED SIMPLY FOR FUN-->
            <div class="carousel-item active">
                <img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
            </div>

            <div class="carousel-item">
                <img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
            </div>

            <div class="carousel-item">
                <img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
            </div>

        </div>
    </div>

    <!--Next and Previous buttons-->
    <a class="carousel-control-prev" href="#randomCarousel" 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="#randomCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

I have also included scripts and links from the Bootstrap website, but I still haven't been successful. Any additional feedback would be greatly appreciated.

cssangularcarousel

Answer №1

Unfortunately, I am unable to identify the specific issue with your code. However, after making some adjustments to my own code, I was able to get it to work properly. Please take a look at my code and provide any additional clarification if needed.

I hope this information proves to be helpful.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div id="carousel-indicators" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-indicators" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-indicators" data-slide-to="1"></li>
    <li data-target="#carousel-indicators" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
    <div class="container">
        <div class="carousel-inner">
    <div class="item active">
      <img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
    </div>

    <div class="item">
      <img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
    </div>

    <div class="item">
      <img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
            </div>
    </div>
  </div>
</div>

    <!--Next and Previous buttons-->
    <a class="carousel-control-prev" href="#randomCarousel" 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="#randomCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Answer №2

Your code seems to be functioning properly, but it's possible that you may have overlooked including the necessary Bootstrap library files (CSS and JS) or a JavaScript library file. It's hard to pinpoint exactly what may be missing from your code.

Below is a functional example based on your code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="randomCarousel" class="carousel slide" data-ride="carousel">

    <!--Indicator Buttons-->
    <ol class="carousel-indicators">
        <li data-target="#randomCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#randomCarousel" data-slide-to="1"></li>
        <li data-target="#randomCarousel" data-slide-to="2"></li>
    </ol>

    <!--Carousel w/Images-->
    <div class="container">
        <div class="carousel-inner">

            <!--ALL PICS ARE PART OF CREATIVE COMMONS; ADDED SIMPLY FOR FUN-->
            <div class="carousel-item active">
                <img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
            </div>

            <div class="carousel-item">
                <img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
            </div>

            <div class="carousel-item">
                <img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
            </div>

        </div>
    </div>

    <!--Next and Previous buttons-->
    <a class="carousel-control-prev" href="#randomCarousel" 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="#randomCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

https://codepen.io/pgurav/pen/KKKxBwM

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

Using Bootstrap 3 with ResponsiveSlides.js

I've been struggling to center the ResponsiveSlides slider within a bootstrap column. Despite resizing my large images to 80% in the CSS, they still refuse to align properly since they're no longer fitting the entire screen at 100%. Can someone l ...

htmlcsstwitter-bootstrapresponsive-slides

Emphasizing the chosen element in a list using angular

After retrieving an array of items from the database, my list is constantly changing, causing the HTML display to update dynamically. However, I am struggling with highlighting only the selected item in the list, as the entire list gets highlighted upon se ...

htmlangularlist

Assistance needed with CSS selectors for implementing with selenium

<div id="footerSearchInputDefault" class="defaultText" style="visibility: hidden;">Search myTwonky</div> In relation to selenium, what do the following terms refer to in the above code snippet? attribute element value text label I often fin ...

cssselenium

What is the purpose of setting the image border to inline block?

When I added a span element as the circular border to my image, which is placed inside a span tag, I observed that the span tag was being pushed down. By giving the span a display:inline-block property, the issue was resolved. But why does this happen? ...

htmlcss

The Battle of Priority: Conflicting !Important Declarations in CSS

I'm currently revamping a CSS template created by previous developers. I've noticed that a specific block is duplicated, with one version hidden for wide-screen display and the other hidden for smaller screens. It's unclear why two separate ...

csstwitter-bootstrapbootstrap-4

Can you identify the method used to apply CSS classes to an element?

Looking for clarification, I've noticed a pattern of "adding" (although unsure if that's the correct term) classes to elements in HTML UI frameworks. For instance, considering an element with these class attributes: class="mif-earth mif-2x" To ...

htmlcssterminology

NgFor is failing to display data from a fully populated array of objects

CLICK HERE FOR THE IMAGE So, let's tackle the issue at hand. I have an array that contains data fetched from an API. These data points are essentially messages. Now, below is the TypeScript file for a component where I aim to display all these messag ...

javascripthtmlangular

Having trouble with the JSFiddle dropdown button that is unresponsive to

I am currently in the process of developing a test drop-down menu. The open menu button functions correctly, however, the close button is unresponsive to clicking or hovering actions. Upon clicking the open menu button, it should make the other button visi ...

javascripthtmlcss

The onInit Observable subscription will only execute a single time

Within my table, I have a list of names and an input tag that filters the content of the table when its value changes. The data is retrieved from an HTTP request to a service. I am encountering three different scenarios: 1- If I subscribe to this.ds.getD ...

angulartypescriptangular2-observablesngoninit

Space left vacant following an unordered list item

Is there a way to remove unwanted space after an unordered list in IE and Firefox, specifically in the last HTML <li> item? I've tried adjusting the ul width but it didn't work. Any ideas on how to get rid of the space? Thanks. #menubar ...

htmlcss

Adjust the colors of two elements by clicking a button's onclick event

As stated in the title, I have a button in the books component. When this button is clicked, the color of a div within the books component and another div in the navbar component should change. - Below is the code for the books component : export class Bo ...

htmlangulartypescriptbootstrap-4

Navigating JSON Objects in Ionic 2

Example of my JSON array structure [{ label: "Interests", datatype: "check", lookupname: "null", order: "05", options: [ 0:{id: "01", value: "Photography"} 1:{id: "0 ...

angularionic-frameworkionic2ionic3

Attempting HTTP requests on an iOS simulated device using Ionic Capacitor is not functioning properly

Upon sending an HTTP request, it functions smoothly on the browser (using Ionic serve). However, when I compile IOS and Android versions using Capacitor, I encounter the error displayed in the console: Error: SyntaxError: JSON Parse error: Unrecognized tok ...

angularhttpionic4capacitor

The CSS code for creating a typing effect is not functioning properly

I'm having some trouble with a code snippet I wrote to create a typing effect on hover within a div. Here's the code: .about-panel:hover p { color: white; font-size: 1em; white-space: wrap; overflow: hidden; -webkit-animat ...

htmlcssweb

Having trouble with Angular and PrimeNG: CSS styling not rendering

I recently started using PrimeNG but I'm having trouble getting the styles to look good. Despite not seeing any errors in ng serve or the browser logs, the components (a calendar and 3 buttons) appear dull. app.module.ts import { BrowserModule } fro ...

angularprimeng

Tips for showcasing saved images in Spring Boot with Angular 4

I am currently utilizing Spring Boot in combination with Angular 4. The issue I am facing involves uploading an image to the project location. However, upon attempting to view the uploaded image, it does not display correctly and instead throws an error. H ...

javaangulartypescriptspring-boot

How to centralize a div using jQuery when its width is not known

I have a fixed position div that I want to center in my browser window. Although it can be done with CSS, the issue is that I am dynamically changing the element's width multiple times (due to loading content via ajax), which means the width changes ...

jquerycsshtmlcenter

Content within the two inline divs is experiencing alignment problems?

I am experiencing alignment issues with the content inside two divs that contain multiple nested divs. The content is not properly aligned. CSS Code: .breadcrumb-nav{ margin-left: 230px; left: 70px; top: 70px; width: 1291px; height: 6 ...

htmlcss

Finding the perfect pairing: How to align counters with objects?

public counter = 0; x0: any; x1: any; x2: any; x3: any; x4: any; next(){ this.counter += 1; this.storage.set("Count", this.counter); console.log(this.counter); this.logic(); } logic(){ //automatic counter here var xNum = JSON.parse(JSON.stri ...

javascripthtmlangulartypescriptionic-framework

Troubleshooting a custom pipe issue in Ionic v4 with Angular

I attempted to create a pipe in the ionic -v4 beta version to reverse an array, but encountered a parser error in the template. Below is the example of what I tried: ionic g pipe pipe/reverse Here is the pipe definition: import { Pipe, PipeTransform } f ...

angulartypescriptionic4