Step by step guide on integrating a Slider into the header bullet point

I have successfully added the Bootstrap 5 website slider and it is working well. However, I am wondering how to position the slider at the top right with bullet points and without the back and previous arrows. Does anyone know the correct way to achieve this?

Here is my sample image for reference: https://i.sstatic.net/5xsVg.png

.carousel-indicators {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.carousel-indicators button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  border: none;
  margin-right: 10px;
  margin-bottom: 0;
}

.carousel-indicators button.active {
  background-color: #000;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7f7272696e696f7c6d5d28332d332f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1828e9384a1d3cfd8cfd3">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464110a140a16">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="row">

              <div class="col-md-12">
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <div class="row">
                      <div class="col-md-6">
                        <img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 1">
                      </div>
                      <div class="col-md-6">
                        <h3>Slide 1</h3>
                        <p>Some sample text.</p>
                      </div>
                    </div>
                  </div>
                  <div class="carousel-item">
                    <div class="row">
                      <div class="col-md-6">
                        <img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 2">
                      </div>
                      <div class="col-md-6">
                        <h3>Slide 2</h3>
                        <p>Some sample text.</p>
                      </div>
                    </div>
                  </div>
                  <div class="carousel-item">
                    <div class="row">
                      <div class="col-md-6">
                        <img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 3">
                      </div>
                      <div class="col-md-6">
                        <h3>Slide 3</h3>
                        <p>Some sample text.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" 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="#myCarousel" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>

          </div>

javascripthtmlcssbootstrap-5

Answer №1

To get rid of the controls (previous and next buttons), you can remove the HTML code below:

<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" 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="#myCarousel" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>

For moving the indicators (dots) to the top right, use the following CSS:

.carousel-indicators {
  position: absolute;
  top: 0;
  right: 0;
  justify-content: end !important;
  margin-right: 10% !important;
  margin-left: 10% !important;
}

.carousel-indicators button {
  width: 10px !important;
  height: 10px !important;
  border-radius: 100%;
  background-color: red !important;
}

Add the class pt-4 to the carousel.

Refer to the snippet below.

.carousel-indicators {
  position: absolute;
  top: 0;
  right: 0;
  justify-content: end !important;
  margin-right: 10% !important;
  margin-left: 10% !important;
}

.carousel-indicators button {
  width: 10px !important;
  height: 10px !important;
  border-radius: 100%;
  background-color: red !important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796a6d3c8d6c8d4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e2eef3e4c1b3afb8afb3">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55373a3a21262127342515607b657b657b67">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="row">
  <div class="col-12">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
  </div>
</div>
<div id="myCarousel" class="carousel slide pt-4" data-bs-ride="carousel">
  <div class="row">
    <div class="col-md-12">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="row">
            <div class="col-md-6">
              <img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="col-md-6">
              <h3>Slide 1</h3>
              <p>Some sample text.</p>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row">
            <div class="col-md-6">
              <img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="col-md-6">
              <h3>Slide 2</h3>
              <p>Some sample text.</p>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row">
            <div class="col-md-6">
              <img src="https://via.placeholder.com/150x100/cccccc/ffffff" class="d-block w-100" alt="Slide 3">
            </div>
            <div class="col-md-6">
              <h3>Slide 3</h3>
              <p>Some sample text.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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

Transferring information from a webpage to a popup using executeScript: A guide

I've successfully retrieved data from a website, but I'm struggling to send it to popup.js. I attempted to use executeScript with a callback, but it's not working for me. popup.js function getData() { chrome.tabs.query({active: true, c ...

javascriptgoogle-chromegoogle-chrome-extension

What are the steps to integrating databases with HTML5?

I currently have SPA applications developed with angularjs, but I am in need of creating an installer that allows users to work offline using a secure local database. I experimented with IndexedDB and converted my SPA into a Chrome extension, however, I di ...

angularjshtmlgoogle-chrome-extensionsingle-page-applicationindexeddb

Is there a way to send the values of multiple checkboxes using Ajax and display them in separate div elements?

I have a JSP page with checkboxes. I am trying to retrieve the checkbox values and include them in the data property of an AJAX call. When the AJAX call is made, a div will open displaying the selected checkbox values as follows: fruits: Lichi, Mango H ...

jqueryhtmlajaxspringjsp

Interactive calendar control for selecting dates in JavaScript

I have implemented two date inputs in my PHP form: Arrival Date Departure Date Currently, when the Date Icon is selected, it displays the CURRENT DATE AND MONTH. What I am looking for is that when the user selects the Arrival Date first and then the De ...

javascript

Retrieve data from a Vuetify data table when the user clicks on the arrow

Currently, I am utilizing a v-data-table with expandable rows. My goal is to retrieve the value of a row when the expand arrow is clicked. While I am aware that I can use @click:row to get the value when the row is clicked, I am specifically looking to obt ...

javascriptvue.jsvue-componentvuetify.jsv-data-table

A guide on using AJAX to update an HTML table and other data simultaneously from within a single script

I'm reaching out for your assistance. In my javascript code, I currently make two separate AJAX calls - one to create a map using openstreetmap and another to refresh an HTML table. Both PHP pages involved in these calls utilize the same MySQL reques ...

javascriptphpajax

Having difficulty retrieving data in mongodb using category id

Currently, I am attempting to sort and filter my pets based on categories. The pets are modeled as follows: const Pet = mongoose.model( 'Pet', new Schema({ name: { type: String, required: true, } ...

javascriptnode.jsmongodbmongoose

Creating a hover state for a CSS class seems straightforward, but I'm finding it a bit tricky

I am looking to customize my inline menu by changing the last menu item to a different colored box with unique text. I have successfully applied a custom style using the #navbar a.blogbox class, but I am struggling to figure out how to change the hover s ...

css

Trouble with Fancybox 2 and CSS classes not applying correctly

Despite my previous successful experiences with fancybox, I am currently facing an issue where the CSS styling is not being applied as expected. The large images appear grouped correctly, but without any styling, causing them to shift to the right after ap ...

jquerycssfancyboxfancybox-2

Having trouble with Angular + Rails combination: Angular can't seem to locate the controller

Issue: I am encountering an error in my Angular / Rails app. When trying to access a Rails controller function from the Angular controller, I receive the following error: Uncaught TypeError: tasks.moveOrder is not a function. Strangely, all other functions ...

javascriptruby-on-railsrubyangularjs

Creating uniform height for dynamic MdBootstrap cards

I am attempting to ensure uniform height for these cards regardless of the length of the movie title. The cards are dynamically generated and I am using swiperjs for carousel functionality. Just to clarify, these are mdBootstrap cards. Below is the code sn ...

htmlcssbootstrap-4mdbootstrap

Set checkbox variable to undefined at all times

I am having trouble determining the state (True/False/null, etc.) of my "CSS-only" toggle switch. No matter what I try, I keep getting a null value. I'm not sure why this is happening, but it seems that the checkbox input is not functioning as expecte ...

javascriptvariablescheckboxtoggle

Establishing a primary color for all text in Vuetify

How can I set a base color for all text in a Vue + Vuetify project? I attempted to change the theme's primary color in vuetify.ts: export default new Vuetify({ theme: { themes: { light: { primary: "#E53935", }, }, }, } ...

cssvue.jscolorsthemesvuetify.js

"Creating dynamic web apps with the powerful duo of Meteor and Zurb

Just starting out with programming and currently working on a new web application using Meteor and AngularJS. I would like to incorporate the elements/css from 'Zurb Foundation For Apps' into my project... I am familiar with including Bootstrap ...

javascriptcssangularjsmeteorzurb-foundation-apps

Utilizing a layout featuring dual text fields and corresponding labels within an input group

My goal is to include two text fields within a single div using the input-group class. However, I am facing an issue where the labels for these fields are not lining up properly above them. This is my current code snippet: <div class="col-sm-6 mt- ...

bootstrap-5

The jQuery method .find() is unable to locate the <option> tag and behavior unpredictably

Currently, I am working on a webpage that features a table with filtering capabilities using jQuery. The filtering functionality is achieved through a Bootstrap 4 dropdown menu where each option is assigned a specific value: <select id="inputState& ...

javascriptphphtmljquerybootstrap-4

Secure your desktop application with OAuth by enabling HTTPS on localhost

I am currently in the process of developing a desktop application that integrates with Spotify's oauth api using the implicit grant flow as outlined here: My plan is to incorporate an "Authenticate" button, which when clicked will open the user' ...

javascriptexpresshttpsoauthelectron

Adding several lines of HTML content from an object using jQuery's append method

Currently, this is what I have: $(document).ready(function() { $.ajax({ type:"GET" , url:'{{url("/api/getcart")}}' , dataType:"json", success: function(data){ $('#price').append(data.cartitems[1].product.pr ...

javascriptjqueryhtmlajax

How can I use Java script to find specific text within table rows on a website?

I am looking to create a dynamic table that filters rows based on user input in an input text box. Here is an example table: Row 1: Apples Row 2: Oranges Row 3: Bananas When a user starts typing in the text box, I want the rows to filter accordingly. ...

javascriptjquery

Deactivating the class from a button

On my website, I have 3 buttons that represent different product categories. The initial state of the page should load with the "All Products" button having an active class. However, when clicked, this active class should be removed from the "All Products" ...

javascript