Enhance your slider with tabs using Bootstrap 5

My latest project involved creating a slider using Bootstrap 5. Here is the current result:

     <head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eee9eee8fbeadaafb4a8b4a9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285d465a465b">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>

<div class="col-xl-6 col-md-12 ratio_65">
        <div class="row g-3">
          <div class="col-xl-12 col-sm-12">
            <div class="home-contain">
              <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100" alt="...">
                  </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Next</span>
                </button>
              </div>
              <div class="home-detail text-white p-center text-center">
                <div>
                  <h4 class="text-center">
                    <!--Organic Lifestyle-->
                  </h4>
                  <h5 class="text-center">
                    <!--Best Weekend Sales-->
                  </h5>
                </div>
              </div>
            </div>
          </div>
</div>
</div>

Despite reading the Bootstrap documentation on carousel and trying various examples from search engines, I have been unable to achieve the desired effect.

I am looking to add extra tabs to each slider like in this example image: https://i.sstatic.net/xtfI2.png

javascripthtmlcssbootstrap-5

Answer №1

It's true that Bootstrap doesn't come with built-in support for carousel slider tabs. However, you can still achieve this functionality by leveraging Bootstrap's data attributes data-bs-target and data-bs-slide-to on other elements.

One approach is to apply these attributes to a list outside of the carousel, effectively creating the slider tabs:

<ul class="custom-indicators">
  <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1">
    Slide 1
  </li>
  ...
</ul>

In the provided snippet, the slider tabs are structured using classes within a row divided into four columns col. Clicking on an <li> element automatically navigates the carousel to the corresponding slide index (0).

To customize the appearance of the active slider tab, use JavaScript to toggle a specific class like .active and style it via CSS.

Below are two simple examples utilizing either jQuery or plain JavaScript.

Solution with jQuery

Fortunately, Bootstrap's carousel exposes events for interacting with its functionality, such as slide.bs.carousel:

$('#carouselExampleIndicators').on('slide.bs.carousel', event => { ... });

This function triggers whenever the carousel moves to another slide. Within this function, access the event property to, which holds the index of the next slide. Then, manipulate the active class accordingly:

const nextSlide = event.to;
$('.custom-indicators li').removeClass('active');
$('.custom-indicators li[data-bs-slide-to=' + nextSlide + ']').addClass('active');

You can further enhance the styling of the tabs with custom CSS. Here's a complete example showcasing styled custom indicators:

...

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

Clicking on an item will now automatically remove it from the selection, rather than requiring you to click on a specific

Is there a way to customize the design of select2 items in a multi-select box so that users can easily remove selected items by clicking anywhere on the button, rather than just the small "cross" icon on the left-hand side? Refer to the image; instead of n ...

javascriptjqueryjquery-select2

Having issues with npm python-shell integration within electron framework

I'm currently attempting to establish a connection between a python script and an Electron app by utilizing the npm's python-shell package. The requirement is for the script to be executed whenever a button is clicked. So, let's assume my d ...

javascriptpythonnpmelectrondesktop-application

The color of the text changes from its default color when not in use

Hey there, let me break this down for you... I'm currently in the process of styling a contact form. I've managed to change the text color of my input focus to white. However, when I click away from the form, the inputted text color reverts ba ...

htmlcsscontact-form

The statement ""x=x || 4" will result in a `ReferenceError: x is not defined` because the

What is the reason behind receiving a ReferenceError: x is not defined error when using x = x || 4 or even x=(x||5), while var x = x || 4 operates as intended? ...

javascript

Ways to modify the background shade of a bootstrap column

I am looking to customize the background color of a single column within a bootstrap row, along with applying padding to the row. Please refer to the screenshot provided below for clarification. https://i.sstatic.net/S9Lfx.png <div class="cont ...

htmlcssbootstrap-4

Error: Unsupported Media Type when attempting to send JSON data from an AngularJS frontend to a Spring controller

Below is the controller function code snippet @RequestMapping(value = "/logInChecker", method = RequestMethod.POST, consumes = {"application/json"}) public @ResponseBody String logInCheckerFn(@RequestBody UserLogData userLogData){ Integer user ...

javajavascriptjsonangularjsspring-mvc

JQuery user interface dialog button

When using a jQuery UI dialog, I want to add tooltips to buttons. In my current code: buttons: { 'My Button' : function(e) { $(e.target).mouseover(function() { alert('test'); }); } This code triggers an action only a ...

javascriptjqueryjquery-uijquery-plugins

Tips for managing Ajax JSON response in a PhoneGap application

Although there are a few posts on this topic, I am struggling to piece together the necessary components to make it work. I am in the process of converting a web application into an app using phonegap and I am attempting to create a search form that retri ...

javascriptjqueryajax

Headers cannot be set after they have already been sent following the establishment of the content-type

Currently, I'm attempting to retrieve an object from my server's API. This particular API presents the object as a stream. To properly handle the MIME type of the object (which typically ends in .jpg or similar), I want to ensure that the conte ...

javascriptnode.jshttpexpresshttp-headers

Remove the post by utilizing the $.ajax function

I am just starting out with using $.ajax and I'm not very familiar with it. I have a button that is meant to delete a user post based on the article ID provided. <button type="button" onclick="submitdata();">Delete</button> When this but ...

javascriptphpjquerymysqlajax

Issue with assetic:dump in Symfony 2.8 causing errors

While working on my Symfony 2.8 project, I encountered an error when running the command php app/console assetic:dump. The error message displayed was: Unable to load asset from URL "http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" I ...

javascriptphpjqueryajaxsymfony

What are the steps to changing the navbar's color when scrolling down?

I am having trouble changing the color of my navigation bar from transparent to black after the user scrolls down. Despite trying various methods and watching tutorials, I can't seem to get it to work. HTML <nav role='navigation' class= ...

javascripthtmlcss

Is there a way for me to include a prefix in the path where Vue pulls its component chunks from?

I recently incorporated VueRouter into my project and encountered an issue with the asset URL not being correct. Instead of displaying www.example.com/js/0.main.js The URL it generates is www.example.com/0.main.js Any suggestions on how to include the ...

javascriptvue.jswebpackimportvue-router

When the HTML content matches a specific value, initiate a click event to trigger

Can anyone help me troubleshoot? I've tried multiple methods but can't seem to get it right. Here's a breakdown of what I'm attempting to accomplish: #info-NUMBER-btn shows Click to display more information. #info-NUMBER CSS is set t ...

javascriptjqueryhtmlcss

New Feature in Bootstrap4: Navigation Bar Alignment Shift to the Left

I need help aligning my links to the right side of the page I attempted to use mr-auto but it was not effective <body> <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top mr-auto mt-2 mt-lg-0"> <a class="navbar-brand" hre ...

cssbootstrap-4navbar

Tips for retrieving the MenuItem name upon click event using Menu and MenuItem components in Material UI React

Utilizing MaterialUI's Menu and MenuItem components in a React project, I am looking to display the name of the menu item upon clicking on it. Upon inspecting event.currentTarget in console.log, it returns the entire list item: ListItem Image attache ...

javascriptreactjs

Get Subject Alternative Name from X.509 in a Node.js environment

Having trouble retrieving the SAN from a DoD Smart Card, as the subject alternative name is returning othername:<unsupported>. I have not been able to find many examples on how to parse this information. I would have thought that X509 li in node woul ...

javascriptnode.jssmartcardx509pki

What is the best way to configure an EmailId validator in Angular 6 to be case insensitive?

My register and login page include a form validator pattern matching for the registration form. this.registerForm = this.formBuilder.group({ firstName: ['', Validators.required], emailId: ['', [Validators.required, Validators.patt ...

htmlmysqlnode.jsangularangular6

When working with an outdated package, you may encounter a situation where babelHelpers is not

My current focus is on a vuetify v1.5 project. Unfortunately, one of the dependency packages (d3-flextree) is causing an issue with the 'babelHelpers is not defined' error. The solution I came across suggests using transform-runtime instead of th ...

javascriptvue.jsd3.jswebpackbabeljs

Utilizing Nuxt Axios to assign response data to a variable will dynamically modify the content of the

async fetch() { try { console.log(await this.$api.events.all(-1, false)); // <-- Logging the first statement const response = await this.$api.events.all(-1, false); // <-- Assigning the result console.log(response); // <-- Lo ...

javascriptvue.jsaxiosnuxt.js