Changing the color of Bootstrap Carousel Indicators for a single slide

I am currently facing an issue with the default bootstrap carousel. One of my slides has a white background, causing the carousel indicators to disappear on that specific slide. Although I have a Javascript/jQuery solution in place, it appears to be slightly slow and clunky. I would greatly appreciate any assistance in improving the script or finding an alternative solution.

$('#carousel-generic').on('slid.bs.carousel', function (evt) {
    var elem = $(this).find('.carousel-indicators li'); 
    var active = $(this).find('.carousel-indicators .active');
    if(active.index() == 2) {
        elem.css('border-color', 'grey');
        elem.css('background-color', 'rgba(0,0,0,0)');
        active.css('background-color', 'grey');
    } else {
        elem.css('border-color', 'white');
        elem.css('background-color', 'rgba(0,0,0,0)');
        active.css('background-color', 'white');
    }
})
jquerycsstwitter-bootstrapcarousel

Answer №1

If you are already aware of the element you need to modify (thanks to your use of index()), then you can simply define specific CSS styles for it.

.carousel .carousel-indicators li {
    // regular styles
}
.carousel .carousel-indicators li.active {
    // styles for when it's active
}
.carousel .carousel-indicators li:nth-of-type(3).active {
    // Remember, index() starts at 0 and nth-of-type starts at 1
    // unique styles for that particular instance
}

Answer №2

An easy fix 

.carousel-indicators li {
    background-color: #669966;
}

.carousel-indicators .active {
    background-color: #FF7600;
}

Answer №3

To achieve the desired result, apply the CSS property background-color:"color" to both .carousel and .carousel-indicators li.

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

Unable to access the accurate value of a variable beyond the scope of the getJSON function

There is a variable named items in my code. When I access its value inside the getJSON function, I receive the correct value. However, when I try to access its value outside of the getJSON function, I only get an empty string. Can someone help me underst ...

jqueryfunctionscopegetjson

Incorporating jQuery Masonry for seamless overlapping effect while implementing infinite scroll

I've developed a script that enables infinite scrolling on my website: $(document).ready(function() { function getLastId() { var lastID = $(".element:last").attr("id"); $.post("2HB.php?action=get&id=" + lastID, ...

phpjavascriptjqueryajax

What is the best way to send a JSON object to bootstrap-table?

In my controller, I am passing a JSON encoded object to the view. Using a Bootstrap table in the view to display the data, but it is showing "No matching records found." Can someone please assist with this issue? Here is my controller: see image And here ...

javascriptjquerylaravelbootstrap-table

What's causing my struggle to override the bootstrap nav-link class in next.js?

I am facing an issue where I need to customize the active state of bootstrap .nav-link in the code snippet below: <li className="nav-item"> <a className={`${styles.navLink} nav-link`} role="tab" data-to ...

csstwitter-bootstrapnext.js

Refresh the pagination in a jQuery DataTable

I have incorporated DataTable for pagination within my table. The data in the table is loaded through ajax requests, and I am utilizing my custom functions to populate the table manually by interacting with its DOM elements. However, I am facing an issue ...

javascriptjqueryajaxdatatablepagination

The hyperlink appears to be malfunctioning

I've been working with a jQuery multilayer menu, but I encountered an issue with the link not being clickable. For reference: jQuery: JS Array Demo: When navigating through the menu on the demo site - "devices" -> "Mobile phones" -> "super s ...

jqueryhtmlcss

Using the MVC framework, showcase a collection of images in real-time using AJAX and JQUERY

Managing a website where I fetch and display a list of thumbnail images from the database has proven to be a bit slow. The main issue lies in the time it takes to load each image using Url.Action, which goes through the entire MVC pipeline. To tackle this ...

jqueryasp.net-mvcajax

Troubleshooting problem with presenting real-time data in a Bootstrap Carousel using PHP

Currently, I am in the process of developing a dynamic events calendar to showcase on a website homepage. The information displayed on this calendar is retrieved from a database using PHP. Additionally, I have implemented the Bootstrap framework (version 4 ...

phphtmlcssbootstrap-4

Automatically change div background image based on window resizing

.step-1-4 { background:url('../images/gadget-4-sprite.png') no-repeat; width:950px; height:70px; margin-left: 15px; } The code above sets the CSS for a div containing a background image. The dimensions of the div match that of the imag ...

htmlcss

Strategies for delivering CSS exclusively to up-to-date browsers

What are some methods for serving CSS exclusively to modern browsers while displaying plain, unstyled HTML to outdated versions of Internet Explorer? I am currently employing the following approach, but I am not particularly thrilled about having my main ...

css

Generating a dynamic list of items using arrays in JQuery

I need help creating ul > li elements dynamically using jquery. Here is the data I have: var nodeDataArray = [{ key: 0, name: "George V" }, { key: 1, parent: 0, name: "Edward VIII" }, { key: 2, parent: 0, name: "George ...

jqueryarraysloops

Maximize Input Value with Plus/Minus Function

I need help with limiting the selection of my plus/minus button to a maximum of 20. I tried using the min="1" and max="5" attributes, but they didn't work as expected. Here is my code snippet and a link to a fiddle for reference: https://jsfiddle.net/ ...

jqueryhtmlbuttonfiddle

Interact with jQuery to trigger events upon clicking on a list item, excluding checkboxes within the list

I'm in the process of developing a straightforward web application. I have a dynamically generated list on one section: Subsequently, I set up an event that triggers when any element within the list is clicked: $(document).on('click', &apo ...

javascriptjqueryhtmlcheckbox

Getting caught in a loop with JQuery toggle() after clicking on two different buttons

One of the features I am working on involves a menu bar that needs to be hidden and shown when the register button and login button are clicked. Here is my HTML structure: <div class="top"> <ul> <li><a id="login" href="#"> ...

jquerytoggleshow-hideslidetoggle

The select box in CSS is optimized for Chrome but poorly displayed in Firefox

Struggling with styling the select box for both webkit and moz browsers. It looks great in Chrome, but terrible in Firefox - the default option is not vertically aligned with the select box. Can someone help me pinpoint the issue in this code? CSS: sele ...

cssgoogle-chromefirefoxselect

What steps should be taken to prevent divs from overlapping a centrally positioned, unchanging div when the browser is resized

Looking to create a layout with two columns, featuring a fixed sidebar on the left and centering the main content area. The goal is for the centered content to remain in place when resized and not move further left than where it touches the nav bar (left: ...

htmlcss

Include @url.action with a parameter on a cell within a table using AJAX

I am new to this and I want to add an action method on a table cell. The challenge is that the table is generated using JavaScript (AJAX). Here's the code: $.ajax({ url: "GetData", contentType: "application/json; charset=utf-8 ...

javascriptjqueryasp.netajaxasp.net-mvc

Premature adjustment of images to window size changes

How can I make the images inside a divider move down when the right-end of the browser reaches them? Currently, they start moving down before the edge of the window is reached. Any suggestions on how to fix this? JSFIDDLE: https://jsfiddle.net/prtdaay1/2/ ...

javascriptjqueryhtmlcss

Progressive form upload with AJAX and sophisticated file uploading bar

I am currently working on a photographer portal that requires full administration, and I am facing challenges in implementing a progress bar for image uploads. While I am familiar with creating progress bars for simple file uploads, the complexity of the f ...

jqueryajax

Is the height set to auto for the image stretching to equal the height of the PNG file?

.q-team-images { width: 6.4rem; height: auto; padding-bottom: 1rem; } Does the CSS styling mentioned above ensure that the image will adjust its height according to the height of its PNG file? ...

htmlcss