Bootstrap carousel arrow positioning

user_5213015 0
Viewed 12474

I'm left scratching my head on this. Currently, I have my arrows outside the tiles for my carousel. See Below:

enter image description here

How do I move the arrows down so they're right next to the outside of the indicators to the left and right like below without overlapping?

enter image description here

This web app populates different tiles depending on what users log in so it's important to keep the arrows adjusting based on how many carousel indicators populate per user.

HTML

<div id="{{ game_group }}-game-carousel" class="carousel slide">
<div class="test">
<div class="carousel-indicator-wrapper">

    <ol class="carousel-indicators">
        {% for obj in game_data %}
            <li data-target="#{{ game_group }}-game-carousel" data-slide-to="{{ forloop.counter0 }}" class="{% if forloop.counter == 1 %}active{% endif %}"></li>
            {% if game_group != "NS" and forloop.last %}
                <li data-target="#{{ game_group }}-game-carousel" data-slide-to="{{ forloop.counter0 | add:"1" }}"></li>
            {% endif %}
        {% endfor %}
    </ol>

</div>
<a class="carousel-control left" href="#{{ game_group }}-game-carousel" data-slide="prev"><i class="icon-chevron-left" aria-hidden="true"></i></a>
<a class="carousel-control right" href="#{{ game_group }}-game-carousel" data-slide="next"><i class="icon-chevron-right" aria-hidden="true"></i></a>
</div>
</div>

CSS

#SL-game-carousel, #CL-game-carousel{
height: 425px;
margin-bottom:0px;
border:0px solid red;
}

#NS-game-carousel{
height:180px;
margin-bottom:0px;
border:0px solid red;
}

.carousel-indicator-wrapper{
  position:absolute;
  top:160px;
  z-index: 5;
  width:100%;
}

#lobby-tab-content .carousel-indicator-wrapper{
  top: 362px;
}

.carousel-indicators {
  position:relative;
  padding:0;
  /*use this display this to center the indicators horizontally*/
  display:table;
  margin:0 auto;
  top: 0px;
}

.carousel-indicators li {
background-color: rgba(223, 223, 223, 0.40);
border-radius: 5px;
height: 10px;
margin-left: 2px;
margin-right: 2px;
width: 10px;
cursor: pointer;
}

.carousel-indicators .active {
  background: rgb(255,255,255);
}

.test {
text-align: center;
}

.slot-carousel {
  width:640px;
  height:345px;
  /*background-color:rgba(255,0,0,.3);*/
  margin: 0 auto;
}

#NS-game-carousel .slot-carousel {
height:180px;
}

#lobby-tab-content #SL-game-carousel .carousel-control, #NS-game-carousel                 
.carousel-control, #CL-game-carousel .carousel-control {
  margin: /*178px 0px 0px 270px*/; 
  border-radius: 0;
  background-color:transparent;
  color: #dfdfdf;
  font-size: 38px;
  height: 40px;
  width: 40px;
  opacity: 1;
  filter: alpha(enabled='false');
  border:0;
  text-decoration: none;
}

#lobby-tab-content #SL-game-carousel .carousel-control.right, #NS-game-carousel .carousel-control.right, #CL-game-carousel .carousel-control.right {
  margin: /*178px 299px 0px 0px*/;
}

.icon-chevron-left:hover {
    color: #d8d8d8 /*#cbcbcb*/;
}
.icon-chevron-right:hover {
    color: #d8d8d8 /*#cbcbcb*/;
}

#game-lobby #NS-game-carousel .carousel-control{
  margin-top:-27px;
}

#game-lobby #NS-game-carousel .carousel-control.right{
  margin-top:-24px;
}

.carousel-control.left {
    background-image: none !important;/*url('/static/images/arrow-left.png');*/
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.carousel-control.right {
    left: auto;
    right: 15px;
    background-image: none !important; /*url('/static/images/arrow-right.png')*/
    background-position:0px 0px;
    background-repeat:no-repeat;
}

Any help is gladly appreciated. Thanks!

twitter-bootstrap css html jquery
5 Answers

try this:

enter image description here

.carousel-control {
    width: 30%;/*put your desired width*/
    margin-top: 150px;/*put your desired top margin*/
}
user_139679100

This would put arrows in the same line, bootstrap version-4.4

    <div class="col-md-8 h-100">
      <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="2" class=""></li>
          <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100 img-carousel" alt="First slide [800x400]"
              src="{{ static_url('assets/img/1.svg')}}" data-holder-rendered="true">
            <div class="carousel-caption d-none d-md-block text-dark">
              <h5>What is lol?</h5>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nulla vitae elit libero, a pharetra augue mollis interdum.
              </p>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100 img-carousel" alt="Second slide [800x400]"
              src="{{ static_url('assets/img/2.svg')}}">
            <div class="carousel-caption d-none d-md-block text-dark">
              <h5>Second slide label</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100 img-carousel" alt="Third slide [800x400]" data-holder-rendered="true"
              src="{{ static_url('assets/img/3.svg')}}">
            <div class="carousel-caption d-none d-md-block text-dark">
              <h5>Third slide label</h5>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
          </div>
        </div>
        <!-- <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a> -->
      </div>
    </div>
user_57608320

There's a simple way to get around this. Delete the "carousel" off of the class "carousel-control-next" and "carousel-control-prev". These classes are what Bootstrap targets with their SCSS for positioning. You can now target the arrows new classes, "control-prev" and "control-next".

Set a parent div's position to "relative" and the controls to "absolute" and you can position them anywhere you want based on the parent. Hope this helps!

user_170905710
Related