Using an array of objects to set a background image in a Bootstrap carousel using jQuery: a step-by-step guide

I have an array of items, each containing a background property with a URL to an image. Here is my array: https://i.sstatic.net/jfrV0.png

Here is the HTML structure:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators"></ol>
        <div class="carousel-inner" role="listbox"></div>
        <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

And here is the script using a jQuery plugin:

$(items).each(function(index){
                $('.carousel-inner', self).append('<div class="item"><div class="container"><div class="carousel-caption">' + this.tournamentName + ' / ' + this.matchStatusName + '</div>');
                $('.carousel-inner div.item.active').css('background', 'url(' + this.background + ')');
                $('.carousel-indicators', self).append('<li data-target="#myCarousel" data-slide-to="'+index+'"></li>');
                $('.carousel-indicators li:first, .carousel-inner div.item:first', self).addClass('active');
                $(self).carousel();
            });

I have tried setting the background like 

$('.carousel-inner .item.active').css('background', 'url(' + this.background + ')');
and 
$('.carousel-inner div.item.active').css('background', 'url(' + this.background + ')');
but it only shows the first item with that image and stays that way until reaching the end of slides.

Can anyone provide some assistance?

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

The issue lies with the selection of 

$('.carousel-inner div.item.active')
in your code. The problem is that you are attempting to target a div with the active class, but this class does not currently exist on your div.

To resolve this issue, update the following line of code:

$('.carousel-inner div.item.active').css('background', 'url(' + this.background + ')');

to:

$('.carousel-inner div.item:eq('+index+')').css('background', 'url(' + this.background + ')');

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

Strategies for Locating XPath Using Text Content within Table Cells (td / tr)

Need help with searching for specific text within a large HTML table of emails and selecting a button within the element? You can easily find the table body via XPATH by using: //*[@id="reportList"]/tbody Within this table, there are multiple rows (tr). ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver

An image appears fractured when placed within a table cell, yet displays perfectly when positioned outside of the table

I am currently facing an issue with loading image files in table cells using jQuery. Here is the code snippet from my View: <table id="personDataTable" border="1"> <tr style="font-size:large; height:auto"> <th width="10 ...

jqueryhtmlimagemodel-view-controller

Adjust the number of columns displayed when rendering with Datatables

I've utilized DataTables to create a dynamic datatable. $('table').DataTable( { dom: 'Bfrtip', buttons: [ 'copy', 'excel', 'print', ], responsive: true } The table I created c ...

jqueryhtmldatatabledatatables

Display upon hovering, conceal with a button located within a popup container

There seems to be an issue with the code below. Even though it works perfectly in jsfiddle, it breaks in my Chrome and other browsers right after displaying the ".popup" div. Can anyone point out what I might be doing wrong? I found similar code on this si ...

javascriptjqueryhtmlcssjquery-hover

My mobile website, built using Bootstrap, appears as if it is zoomed

I recently launched a website called dekhbehen.com, where users can download wallpapers and generate memes. One issue I have encountered is that when the site is accessed via smartphone, it appears zoomed out. You can visit the specific URL causing this ...

jqueryhtmlcsstwitter-bootstrap

Using React to Filter cards according to the selected value from an Autocomplete feature

I'm currently developing a React application that utilizes Material-UI's Autocomplete component to filter cards based on selected car brands. These cards represent various models, and the goal is to update them when a user picks a brand from the ...

javascriptreactjsreact-nativematerial-uifiltering

Identifying the color category based on the color code in the props and displaying JSX output

I am in need of a solution to display colors in a table cell. The color codes are stored in mongodb along with their descriptions. I am looking for a library that can determine whether the color code provided is in RGB or hex format, and then render it acc ...

javascriptreactjsmongodb

The multi-line declaration prettier indicates that a newline is expected after the colon

When using Prettier to format code in a scss file, it is formatting this specific part: @font-face { font-family: 'Encode Sans Condensed'; src: url('/pf/resources/fonts/EncodeSansCondensed/EncodeSansCondensed-Thin.ttf') format('tr ...

csssassprettier

Is there a way to UPDATE a div without having to RELOAD the entire page in it?

SOLVED -SORT OF--- After much frustration, I finally found a solution to my problem. By adding window.location.reload(); in my code where the submit button is, I was able to close the div successfully. // Collapse Panel on submit $("div#panel").on(' ...

phpjqueryhtmlrefresh

Pass a variable between popup.js and background.js in a Chrome Extension

Despite finding some answers to similar questions, none of them provide a complete solution. The information in the answers lacks necessary documents that were not included in the original question. My goal is to create a scaffold for Chrome extensions wh ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Guide on switching the theme color in c# aspnet core using a toggle button within a partialview

Description I am looking to change the color scheme of my Bootstrap 5.3 theme by clicking a button within a partial view. The toggle button is customized to meet my specific requirements, and the chosen value is stored in a cookie for future reference. ...

javascriptc#asp.net-mvcasp.net-corebootstrap-5

Error message: "No elements were found in Ember.js jQuery cycle slideshow"

As I transition a traditional HTML site to an Ember.js application, I encountered a problem with the jQuery Cycle slideshow plugin. With approximately 10 slideshows on the site, I aimed to create a reusable partial to pass data to. Although the data passi ...

javascriptjqueryember.jshandlebars.jsjquery-cycle

Error message: "jQuery Ajax CORS request returning undefined value"

I am delving into the world of cross-domain Ajax requests for the first time by interacting with an API. Utilizing jQuery, I aim to extract specific elements from the response and display them on the webpage. Here is the code snippet for the request: $.a ...

javascriptjqueryajaxcorscross-domain

Tips for incorporating real-time information into a highchart graph?

I'm currently working on a Highchart that utilizes AJAX and jQuery for receiving JSON data. However, I've noticed that the points on my chart only appear when I hover over it, and even then they all seem to be clustered at the top of the chart. I ...

javascriptjqueryhighchartsdata-visualization

An issue occurred while attempting to hover over the text in the SVG map

I have a United States map. This code contains CSS for styling the map with different colors for each state. It also includes an SVG image of the map and text labels for each state name. However, there is an issue with the hover effect on the state name ...

htmlcsssvghover

Retrieving Information from Ajax Response Following a Successful Insert Query in Codeigniter

I am trying to use ajax method to insert form data into a database and then redirect it to the next page. I have successfully passed the data in ajax and inserted it into the database table. However, I am facing an issue with getting the generated referenc ...

javascriptphpmysqlajaxcodeigniter-3

conditionally trigger one observable in rxjs before the other

I am in need of assistance or guidance regarding a challenge I am facing with rxjs that I cannot seem to resolve. In essence, my goal is to trigger an observable and complete it before the original one is triggered. Scenario: I am currently working on a ...

javascriptangularrxjsangular9

Reactstrap: Is it necessary to enclose adjacent JSX elements within a wrapping tag?

While working on my React course project, I encountered an issue with my faux shopping website. The error message that keeps popping up is: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...& ...

javascriptreactjstwitter-bootstrapjsxreactstrap

What is the best way to show a pop-up model at the bottom of a webpage?

I am working on a project that involves a popup modal that needs to appear after 10 seconds. However, the issue I am facing is that the modal is currently displaying at the top of the page, but I would like it to be shown at the bottom of the page just abo ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I place the current date inside a red dashed box with text using JavaScript?

Let's Solve This: The date currently appears in the top left corner without any special formatting. My goal is to make it bold, red, and encased in a dashed-red border. I have identified the element by its ID "datetext", corresponding to a "p" tag w ...

javascripthtml