Using several Bootstrap carousels on a single page

Currently, there are three bootstrap carousels displayed on a single page.

These carousels are generated by a PHP loop, with the IDs always starting off as "carousel".

The issue arises because all the carousels initially have the ID and control href set to "carousel-1".

I am aware that this setup will cause all carousels to scroll the first one. To address this problem, I attempted to use the following jQuery code:

$('.second-block #carousel').attr("id","#carousel-2").find('.controls a').attr("href","#carousel-2");
$('.fourth-block #carousel').attr("id","#carousel-3").find('.controls a').attr("href","#carousel-3");

Although this code changes the IDs of the other carousels, it still causes only the first carousel to slide. Any suggestions for a solution?

Here is a Codepen link

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

In order to modify the id elements of both .carousel-control and .carousel, you need to follow guidelines provided by W3:

The id attribute

The id attribute assigns a unique identifier (ID) to an element. This ID must be distinct within the element's root subtree and should consist of at least one character, with no spaces included.

You can refer to this example on Jsfiddle

$('.second-block').find(".carousel").attr("id", "carousel2");
$('.second-block').find('.carousel-control').attr("href", "#carousel2");
$('.third-block').find(".carousel").attr("id", "carousel3");
$('.third-block').find('.carousel-control').attr("href", "#carousel3");

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

An empty array should be returned if a blank string is provided as input

While I've tackled similar exercises in the past and always managed to solve them, this time I'm facing a roadblock with something quite simple. I'm working on creating a function that retrieves the middle characters from each word in a stri ...

javascriptarraysstring

Can HTML variables be accessed in lines of code before they are declared in HTML?

In line 1 of my code, I am trying to access the rowData variable which is declared in the second HTML line. However, I keep getting the error message "Property 'rowData' does not exist on type 'AppComponent'" for that line. Strangely, t ...

htmlangulartypescriptprimeng

How can you position inline-block elements within a flex container?

I have a main div set up as a flex box. Inside this main div, there will be three elements positioned as inline-block: two advertisements on the left and right sides, with the content in between. My goal is to have the advertisements aligned to the left an ...

htmlcssflexbox

What steps do I need to take in order to generate a legitimate link annotation within Adobe Acrobat by utilizing Acrobat

Seeking guidance on how to embed an Acrobat Javascript within Adobe Acrobat in order to generate a link annotation. The current method involves using the "addLink" function within the document object, which triggers a Javascript action upon clicking the li ...

javascriptpdfacrobatacrobat-sdk

Issues with AngularJS controller retrieving data from AJAX calls

Currently utilizing Angular 1.4.7 in conjunction with angular-ui-router 0.2.15 as the state router. The standard controller setup I have is as follows: var app = angular.module('App.Page1',[....]); app.controller('Page1Ctrl',['$sc ...

javascriptangularjsajax

Using Bootstrap 4 with Angular 2: A Beginner's Guide

Currently, I am in the process of developing an Angular 2 application using TypeScript. My goal is to integrate the Bootstrap 4 framework with some custom theming. Is this achievable? I have encountered issues with the "ng2-bootstrap" npm package, as it d ...

twitter-bootstraptypescriptangularnpmsass

How do I retrieve a nested object element based on the value of a specific field in Mongoose?

Below is the teamModelSchema schema that I am working with. var teamMemberModelSchema = new mongoose.Schema({ "email": { "type": String, "required": true, "min": 5, "max": 20 }, "name": { "type": String ...

javascriptnode.jsmongodbexpressmongoose

Troublesome code with Ajax, Jquery, and PHP is causing issues

I've been trying to send an array from php to js using ajax, but for some reason it's not working no matter what I try. I'm convinced it must be a simple fix, but I seem to have exhausted all my options. <!doctype html> <html lang= ...

javascriptphpjqueryhtmlajax

Collect all hash symbols from a sequence of characters until a specific symbol appears

I am struggling with extracting hashtags from a string in JavaScript. My goal is to extract the text starting from the # character but stopping at the first special character. For example: String: This is a #first./23k%^ hashtag Required extract: #fir ...

javascriptregexhashtag

Unable to retrieve data from the database within PHP code

I have successfully built a shopping cart website utilizing SQL, HTML, and PHP. Below is the code snippet for the 'Add to Cart' button: <form method="post" action="cart.php" class="form-inline"> <input type="hidden" value="&apos ...

javascriptphphtmlcsssql

Focusing on a specific div element

I need help selecting the initial div block that contains the word "Target". <div class="box-content"> <div> <div>Target</div> <div>xxxx</div> <div>xxxx</div> <div>xxxx</div> ...

csscss-selectors

Is it possible for data transmitted or received through a socket written in various languages to be comprehended by both parties involved?

Is it possible for data to be transmitted accurately between two programs written in different languages (C++ and JavaScript using Node.js in this case) when connected through a socket? ...

javascriptc++node.jssockets

Utilizing the doGet approach to send form data upon clicking a button

I am attempting to incorporate a button of type="button" on a form that will process the information using the doGet method instead of doPost for the purpose of updating the URL correctly. Due to this requirement, I am unable to utilize type="submit" or do ...

phpjavascripthtmlajaxjquery

A simple guide to fetching JSON data and storing it in a variable, then parsing it and displaying it

I am looking to retrieve JSON data from the Yahoo Finance API, store it in a JavaScript variable, extract specific information such as "name" and "price", and then display it in an HTML table. The JSON data can be accessed via the following link: Current ...

javascriptjsonparsingvariables

Adjust the text according to the selected checkbox option

I am attempting to update the displayed text based on whether a checkbox is currently checked or not. The value of the viewable text should reflect the user's selection. I believe I am close, but the functionality is not working as expected. <html ...

javascriptjqueryajax

My web browser doesn't recognize my JavaScript as actual JavaScript?

HTML: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="/js/grabber.js" type="text/javascript"></script> <script type="text/javascript"> $(docu ...

javascriptjquerybrowser

When implementing CSS, the background image in the header section of my webpage is not visible to me

I'm currently working on a basic webpage and encountering an issue with setting an image as the background for my header section. Despite using what I believe to be the correct code in the CSS section, specifying the right path and file name for the i ...

htmlcss

Python Mechanization Problems

I recently started delving into the world of Mechanize, beginning my learning journey just yesterday. Just to clarify, my motives are purely educational, with no intention of causing harm. I selected this particular site due to its use of AJAX/Javascript ...

javascriptajaxpostmechanize-python

Introducing a delay in an observable causes incomplete data to be received in Angular using rxjs

Currently, I am facing an issue in my code where I am trying to introduce a delay using timer(500). However, the problem is that it is only returning partial data. Instead of the expected 17 fields, it is only returning 2 fields. Below is my code snippet f ...

javascriptangulartypescriptrxjs

What is the method for accessing a variable that has been defined within server.js from within my ejs script tag?

Currently working on my first NodeJS project which involves a significant amount of file management. I've been thinking about how to streamline the process by accessing a variable created in my server.js within a script tag inside one of my ejs files. ...

javascriptnode.jsexpressejs