Exterior Buttons to Operate Carousel

I have been attempting to create a carousel with the control arrows positioned outside of it, but I am encountering difficulty getting the arrows to display correctly. When I place the controls code outside the carousel, they function as intended but do not align properly on the sides of the carousel.

Below is the HTML code for the controls:

<a class="carousel-control-prev" href="#carouselControles" role="button" data-slide="prev">
            <span class="icon-prev bi bi-chevron-left font-mainColor-s1" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselControles" role="button" data-slide="next">
            <span class="icon-next bi bi-chevron-right font-mainColor-s1" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>

Here is the CSS code:

#myCarousel {
  margin-left: 50px; 
  margin-right: 50px;
}
.carousel-control {
    top: 50%;
  margin: 50px;
}

.carousel-control-prev {
  margin-left: -25px;
}

.carousel-control.next {
  margin-right: -25px;
}

This is the desired layout:

Example

Your assistance is greatly appreciated. Thank you.

htmlcsstwitter-bootstrapwebbootstrap-4

Answer №1

Give this a shot:

.carousel-control {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50px, -50px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

This piece of code will center the arrows container within the carousel and place the arrows at each edge.

1-Note: To move the arrows closer together, you can decrease the width value.

2-Note: If the container is not positioned correctly, adjust the values in this line of code: 

transform: translate(-50px, -50px);
, depending on the axis you need to modify.

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

Selenium's XPath locator unable to locate element despite being visible on the browser

Attempting to extract the WHO coronavirus data from the left sidebar of this website: using Xpath. Here is the code snippet: from selenium import webdriver import time driver = webdriver.Firefox() driver.get("link_to_the_page") time.sleep(30) coun ...

pythonhtmlseleniumxpathwebdriver

What CSS property prevents a fixed header from overlapping a scrolled element?

After creating a fixed header for my HTML table, I noticed that as I scroll down the page, everything is being overlapped by the fixed header except for one slider (noUiSlider). I am curious to know which CSS property is preventing the header from overlayi ...

javascriptjqueryhtmlcss

What is the best method for arranging checkboxes in a vertical line alongside a list of items for uniform alignment?

Trying to come up with a solution to include checkboxes for each item in the list, maintaining even vertical alignment. The goal is to have the checkboxes in a straight vertical line rather than a zigzag pattern. Coffee Nestle ...

javascriptjqueryhtmlcss

Adjusting the appearance of a JavaScript element based on its hierarchy level

Currently, I am utilizing Jqtree to create a drag and drop tree structure. My main goal is to customize the appearance of the tree based on different node levels. Javascript Tree Structure var data = [ { name: 'node1', id: 1, chi ...

javascripthtmlcssjqtree

Aligning a child div within a parent div using HTML/CSS where the child div takes up 30% of the parent div and

Can anyone help me figure out why these two INPUT elements aren't aligning next to each other? I appreciate any assistance you can offer! <STYLE> html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } </STYLE& ...

htmlcss

The conditional CSS appears to be malfunctioning

Hi, I am attempting to use conditional CSS in my stylesheet to set a different width for IE6. I have tried the following code but it is not working: div.box { width: 400px; [if IE 6] width: 600px; padding: 0 100px; } How can I su ...

htmlcss

The problem of creating a custom pop-up with jQuery

I'm running into an issue while trying to develop a custom CSS and jQuery popup. Despite my efforts, the popup isn't functioning as intended. Take a look at my code below and point out where I may have gone wrong. What I aim to achieve is a popup ...

jqueryhtmlcss

time interval between closing angularjs modal and redirection

I'm currently utilizing an AngularJS modal, however, when I need to redirect to another view, I find myself having to close it and add a delay to hide the shadow before transitioning to the new page. Is there a faster solution available? I'm usi ...

angularjstwitter-bootstrap

PHP: Dynamically update div content upon submission

I am attempting to update the "refresh" div after clicking the Submit button and also at regular intervals of 5 seconds. Despite looking through various resources, I have not been able to find a solution that meets my requirements. <script src="h ...

javascriptphpjqueryhtml

Using JavaScript to set the value of an input text field in HTML is not functioning as expected

I am a beginner in the programming world and I am facing a minor issue My challenge lies with a form called "fr" that has an input text box labeled "in" and a variable "n" holding the value of "my text". Below is the code snippet: <html> <head&g ...

javascripthtmlinputassign

Troubleshooting display issues with Chrome and Opera due to jQuery CSS interactions

I am looking to implement a feature where a floating text message appears when the user clicks on certain HTML elements. Here is the code snippet: function showAlert(el, e){ var y = e.pageY; var x = e.pageX; savedState = classes[classes.len ...

jquerycssgoogle-chromeopera

Tips for animating input width as the size value changes during an ajax query transformation

This is my JavaScript code: function updatePriceDisplay() { $.ajax({ url:"query.php?currency=<?=$currencycode;?>" }).done(function(data) { $("value").attr("value", data).attr("size", data.length - 2); }); } updatePriceDi ...

javascripthtmlajax

Items that share identical height and margin values will appear with divergent visual presentations

I am trying to align three horizontal lines so that they are the same height and have an equal spacing between each other. However, due to variations in height and margins, some lines appear larger or smaller than others. How can I ensure they all have th ...

htmlcss

"Is there a way to separate and iterate through the results of a Group_Concat

Fetch Data from MySQL with Group Concat $result = $con->prepare("SELECT results.StuID, subjects_d.SubjectID, exams.ID, GROUP_CONCAT(results.ExamID,',',results.Exam1,',',results.Exam2,',',results.Exam3 ORDER ...

phphtmlmysql

Managing the display of my website's screenshots within the list of recently visited sites on the browser's new tab page

Internet browsers like Firefox and Chrome have the ability to take screenshots of visited websites and display them as "recently used websites" on a new tab. However, if your website contains confidential information, you may be wondering how to prevent b ...

htmlfirefoxscreenshotthumbnailsbrowser-cache

The button contains a clickable link inside it, however the button itself is not clickable

I am encountering an issue with a button that contains a link. Whenever I hover over the button, the cursor changes as expected, but clicking on the button itself does not trigger any action. Instead, I have to click on the link inside the button to redi ...

htmlcss

Determined margin value to replicate the maximum and minimum margin in CSS styling

When attempting to set the margin on an object to 20% with a maximum margin of 200px, I experimented with various methods: margin-left: calc(min(200px, 20%)); and max-margin-left: 200px However, neither property proved to be valid. Is there an alterna ...

css

Ways to choose a distant relative in XML using XPath

To target all direct <p>...</p> elements inside a div, the selector would be div/p If I wish to select all second-level nested <p>...</p> tags within a div, I could use div/*/p Can a specific range be specified instead? div/descen ...

htmlseleniumxpath

Using PHP to display arrays on the screen

Currently, I am working on manipulating an array in my code. I have already accessed the array and begun the process of displaying its contents using the following code snippet: <html> <?php $file=fopen("curr_enroll_fall.csv", "r"); $records[]=fg ...

phphtmlarraysmatrix

Forwarding the geographic coordinates directly to the system's database

I have a unique script that retrieves the precise latitude and longitude position. It then automatically sends this data to a database without the need for user input. <script> function getPosition(position) { var latitude = position.coor ...

javascripthtmlnode.js