CODEWITHSUNDEEP
cssbootstrap-4carousel
QuestionGenerator13
QuestionGenerator13

Reputation: 11

How do I make the bootstrap carousel controls appear on top of the images instead of next to them?

I'm using the carousel code provided by bootstrap and although it's working, the controls are taking up space to the right and left of the image instead of lying on top of them.

I'm a newbie so so far my attempt to fix this was to add

}
.left carousel-control {
    position: absolute;
}
.right carousel-control {
    position: absolute;
}

but it's not changing anything

Here is the full code, the controls are on the sides of the screen instead of on top of the images:

<!DOCTYPE html>
<html>
<head>
<title>Caroussel test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/uxcore.css" rel="stylesheet">
<link href="css/customer-comp.css" rel="stylesheet">
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script type='text/javascript'>
var fqdn = "N1NWVPWEB066.shr.prod.ams1.secureserver.net";
redirectToLogin = function() {
    window.location.href = "https://" + fqdn + ":8443";
}
</script>   
    <style>
        .wrapper {
   position: relative;
}
.left.carousel-control {
    position: absolute;
}
        }
.right.carousel-control {
    position: absolute;
        }
    </style>
</head>

<body>
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="1-rs.png" alt="..." class="img-responsive center-block">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="2-rs.png" alt="..." class="img-responsive center-block">
      <div class="carousel-caption">
        ...
        </div>
      </div>
        <div class="item">
      <img src="3-rs.png" alt="..." class="img-responsive center-block">
      <div class="carousel-caption">
        ...
      </div>

    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" style="position: absolute">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
    </div>
  </div>

</div>


</body>
</html>

++Update: I've tried to position the arrows on top of the images by adding position: absolute and top: 0 to carousel-control as suggested by @Swati and inspecting the element showed that those rule are being overridden by http://stockpath.bootstrapcdn.com/bootstrap/3.4.1/css/less/carousel.less:96 and mydomain.com/:30 What does this mean? Is there a way around it?

Upvotes: 0

Views: 1550

Answers (2)

Swati
Swati

Reputation: 496

Add this css into your code. Hope it will work into your question.

.carousel-control {
    background-image: none !important;
}

Upvotes: 0

Sayedur Rahman
Sayedur Rahman

Reputation: 171

Use this for remove the background.

    .carousel-control.left {
        background-image: none!important;
    }
    .carousel-control.right {
        background-image: none!important;
    }

Upvotes: 0

Related Questions