What could be causing my bootstrap 3.7 carousel to not function properly?

I've been trying to implement this feature of bootstrap by following a guide, but I can't seem to figure out why it's not working. I have all the CDNs and Js Script linked in my header, directly copied from the bootstrap website.

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

    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="../../static/images/city.jpg">
        </div>
        <div class="item">
            <img src="../../static/images/city.jpg">
        </div>
        <div class="item">
            <img src="../../static/images/city.jpg">
        </div>
        <div class="item">
            <img src="../../static/images/city.jpg">
        </div>
    </div>
    <a class="left carousel-control" href="#productCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#productCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
javascriptjquerycsstwitter-bootstrap-3

Answer №1

After reviewing your code, everything seems to be functioning correctly.

Double-check how you are incorporating the libraries into your project.

  1. CSS
  2. JavaScript
  3. Bootstrap JS

<link href="https://example.com/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ABCDEF1234567" crossorigin="anonymous">

<script src="https://example.com/js/jquery.min.js"></script>

<script src="https://example.com/js/bootstrap.min.js" integrity="sha384-ABCDEFG1234567" crossorigin="anonymous"></script>

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

                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="http://placehold.it/800x400">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/800x400">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/800x400">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/800x400">
                        </div>
                    </div>
                    <a class="left carousel-control" href="#productCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#productCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>

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

When the component is reloaded, props will become defined

I am trying to iterate through an object's array to create a table structure like the one below: import React from "react"; export default function Scoreboard(props) { return ( <div className="scoreboard"> <ta ...

javascriptreactjsreact-props

When the return false statement is included, the form fails to submit and instead refreshes on the current page

I recently discussed an issue regarding triggering a dialog box before confirming a submit action. Unfortunately, after implementing this, the document no longer submits when expected. Instead, it just remains on the same page with the same settings. I h ...

javascriptjqueryformssubmit

unable to utilize react-speech-recognition package

Looking for a simple react package that can convert user audio to text? I recently installed one and tried its basic code example, only to encounter an error message stating "RecognitionManager.js:247 Uncaught ReferenceError: regeneratorRuntime is not defi ...

javascriptreactjsnpmspeech-recognitionautomatic-speech-recognition

Internet Explorer experiencing off-screen menu loading issue

Currently, I am in the process of developing a website for my sister but facing challenges with cross-browser compatibility. The menu appears off-screen when using Internet Explorer, while it looks fine on Chrome. Despite various attempts to adjust alignme ...

htmlcsscross-browser

What is the best way to showcase navigation and footer on every page using AngularJS?

I'm in the process of building a Single Page Application. I've decided to create separate components for Navigation, Section, and Footer. The Navigation and Footer should be displayed on every page, while only the Section content changes when nav ...

javascriptangularjsangular-ui-routerangular-ui-bootstrapangular-ui

What is the reason that when creating a fresh object within a for loop using the 'key' from the loop, it ends up being called key?

After delving into the world of JavaScript for about six months now, I've come across something that has left me puzzled. This is completely new to me, so I'm not entirely sure what's happening here. I am attempting to create a new object wi ...

javascriptobject

React array hooks are failing to function as expected, causing updated values to not appear on the screen

import React, { useState } from 'react'; import Tab from 'react-bootstrap/Tab'; import Tabs from 'react-bootstrap/Tabs'; import { sections } from '../../data/sections'; export const NavigationTop = () => { c ...

javascriptreactjsreact-hooks

Is it possible to achieve complete separation of concerns when it comes to HTML, CSS, and JS?

What is the best way to achieve separation of concerns between HTML, CSS, and JS using this HTML structure? <nav role="navigation" class="site-nav js-site-nav"> <ul class="site-nav__list"> <li class="site-nav__item"><a href="#" ...

javascriptjqueryhtmlcssbem

Ways to decrease the spacing between lines in a table row

I am trying to decrease the line height between table rows, but the code I used didn't work. Can you please take a look at the image? Specifically, I want to reduce the space between "Mon-Sat 09:00 AM - 7:00 PM" and "We closed Sunday &a ...

htmlcss

Tips for updating the RadGrid component with JavaScript

An issue arises with this function: function UpdateTable(){ window.location.href="Form_ElameMamoreBazdid.aspx"; } ...

javascriptasp.netradgrid

Guide on setting up a Redirect URL with React Router

I am aiming to trigger a redirect URL event using ReactJS. Is there a way to achieve this? I have already attempted the following: successRedirect(){ this.transitionTo('/'); } as well as successRedirect(){ this.router.transitionTo ...

javascripthttp-redirectreactjsreact-router

What is the best way to structure my Web Service in order to efficiently deliver SQL data to jQuery autocomplete?

My journey through Google has brought me to experiment with various AJAX and jQuery AutoComplete examples. After much deliberation, I have opted for using the jQuery script to implement the autocomplete functionality on my page, leveraging a web service t ...

c#jqueryasp.netajaxjson

Struggling to vertically center input within Bootstrap 4 column

I'm attempting to design some form elements and align the inputs vertically within the columns. I've experimented with vertical-align:middle; and margin:auto 0;, however, neither of these solutions seem to be effective. input { vertical-alig ...

cssbootstrap-4

Emphasize a portion of a text / Apply formatting to a variable

I am facing an issue where I need to format only the date in a specific string. I have managed to extract the date and store it in a variable after isolating it from the original message. <div class="foo"><p> Click here now and get by January ...

javascriptjquerycssvariablessubstring

Column with a bottom aligned div

My current layout in Bootstrap 4 consists of four columns, but I am facing an issue where one of the columns with longer text is causing misalignment of the "buttons" at the end. https://i.sstatic.net/lWFgQ.png Below is the HTML code: < ...

htmlcsstwitter-bootstrapbootstrap-4

Unexpected Django Get request error causing confusion

I am currently working on a basic Django app that enables users to add items to a database. The goal is to have the list of items automatically update whenever a new item is added via the form, displaying both the newly added product and all existing produ ...

pythonjquerydjangogetrequest

Tips for structuring a news thread with a staggered approach

On my Drupal 8 website, I have set up a newsfeed. How can I display the news items in staggered rows? I would like the first item to align on the left and the second item to be on the right, repeating this pattern for all subsequent items. Currently, I am ...

javascriptcssdrupal-8

When calling canvas.getContext('2D'), the function returns a null value

After creating a canvas and calling its getContext() method, I was confused when it returned null for the context. Below is the code snippet that I used: <script> window.onload = initializeCanvas; function initializeCanvas(){ ...

javascripthtmlcanvas

I continually run into the error message "Uncaught ReferenceError: dropMenu is not defined" and "Uncaught TypeError: Cannot read property 'style' of null."

I'm attempting to create a navigation bar with submenus, but I keep encountering errors such as "dropMenu is not defined" and "Uncaught TypeError: Cannot read property 'style' of null" when hovering over the Paris links. Any thoughts on what ...

javascripthtmlcss

Exploring discrepancies in JSON arrays using Lodash

Using lodash to find the difference between two arrays: c1Arr contains: [ { varName: 'city', varValue: 'cccccccc' }, { varName: 'country', varValue: 'dddddddd' } ] c2Arr contains: [ { varName: 'abc', ...

javascriptjsonlodasharray-difference