Как сохранить стрелки карусели в центре даже после увеличения / уменьшения масштаба или обновления браузера windows размера? - PullRequest
Новая
       35

Как сохранить стрелки карусели в центре даже после увеличения / уменьшения масштаба или обновления браузера windows размера?

0 голосов
/ 27 марта 2020

Скрипка

У меня есть таблица, и моя цель - расположить карусель влево, вправо всегда по центру вертикального алина (50% от вверх) и расположите обе стрелки примерно на 5%, но достаточно близко к графику.

Мне трудно заставить это работать. Я пробовал

HTML

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
    <div class="panel panel-filled">
        <div class="panel-body carousel">

            <h1>Network Bandwidth</h1>


            <div id="chart1Carousel" class="carousel slide" data-ride="carousel">

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>


                        <small class="lastSelectedMenu">
                            <span> Current Interval:
                                <span class="lastSelected" style="color: rgb(255, 235, 59);">day (3/25/2020)</span>
                            </span>
                            <select name="last" class="float-right">
                                <option id="default" value="default">Select Interval</option>
                                <option value="day">Day</option>
                                <option value="week">Week</option>
                                <option value="month">Month</option>
                                <option value="year">Year</option>
                            </select>
                        </small>

                        <canvas width="558" height="279" id="chart1" style="display: block; width: 558px; height: 279px;" class="chartjs-render-monitor"></canvas>
                    </div>
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#chart1Carousel" data-slide="prev">
                    <span class="fa fa-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#chart1Carousel" data-slide="next" style="display: block;">
                    <span class="fa fa-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

        </div>
    </div>
</div>

CSS

@media screen and (min-width: 768px)
/*    .carousel-control .fa-chevron-left {
    margin-left: -10px;
}*/
@media screen and (min-width: 768px)
.carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right {
    position: absolute;
    width: 30px;
    height: 30px;
    font-size: 30px;
    top: 50%;

}
.carousel-control .fa-chevron-left {
    margin-left: -70px;
    margin-top: 120px;
}

.carousel-control .fa-chevron-right{
    margin-right: -1200px;
    margin-top: 120px;
}

.carousel {
    position: relative;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-control.left, .carousel-control.right {
    background: none;
}

.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30px;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    background-color: rgba(0,0,0,0);
    filter: alpha(opacity=50);
    opacity: .5;
}

https://codepen.io/sn4k3eye/project/editor/Akyrky

Если вы заметите мою проблему, посмотрев на мои HTML & CSS, пожалуйста, скажите что-нибудь.

1 Ответ

1 голос
/ 27 марта 2020

Я заметил пару вещей, и ваш кодекс был доступен только для чтения, поэтому я переместил его в новое перо:

  1. Ваши стили @media не обернуты в {}, поэтому они не были
  2. Вы пытались переместить .fa-chevrons, но они являются span элементами, и поле не сработало.

Вот полный код, который у вас был - без базы CSS, так как фрагмент стека имеет ограничение по количеству символов. Моя ссылка на codepen содержит все это. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.4.1/cerulean/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
  
    .item img {
      width: 100%;
      height: auto;
    }
    .carousel {
      padding-left: 45px;
      padding-right: 45px;
    }
    .carousel-control .fa-chevron-left,
    .carousel-control .fa-chevron-right {
      position: absolute;
      width: 30px;
      height: 30px;
      font-size: 30px;
      top: 50%;
      display: block;
      transform: translate(0, -50%;
      )
    }
    .carousel-control.right {
      right: 0;
      left: auto;
    }
    .carousel-control .fa-chevron-left {}
    .carousel-control .fa-chevron-right {}
    .carousel {
      position: relative;
    }
    .carousel-inner {
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    .carousel-control.left,
    .carousel-control.right {
      background: none;
    }
    .carousel-control {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 30px;
      font-size: 20px;
      color: #fff;
      text-align: center;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
      background-color: rgba(0, 0, 0, 0);
      filter: alpha(opacity=50);
      opacity: .5;
    }
  
</style>

<div class="col-xs-4">
  <div class="panel panel-filled">
    <div class="panel-body carousel">
      <h1>Carousel Issue</h1>
      <div id="chart1Carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="item active">
            <div class="chartjs-size-monitor">
              <div class="chartjs-size-monitor-expand">
                <div class=""></div>
              </div>
              <div class="chartjs-size-monitor-shrink">
                <div class=""></div>
              </div>
            </div>

            <img src="https://i.imgur.com/ltw5Pac.png" width="558" height="279">


          </div>
        </div>
      </div>


      <!-- Left and right controls -->
      <a class="left carousel-control" href="#chart1Carousel" data-slide="prev">
        <span class="fa fa-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#chart1Carousel" data-slide="next" style="display: block;">
        <span class="fa fa-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>


    </div>
  </div>
</div>

Вы увидите, что я добавил небольшой отступ вокруг графика, чтобы показать, как стрелки будут располагаться рядом с графиком.

Самое важное - это изменить шевроны, чтобы блокировать элементы, и переместить их на 50% от их высоты (на 15 пикселей вверх).

https://codepen.io/chrislafrombois/pen/RwPqdxj

Надеюсь, это поможет вам в правильном направлении. Дайте мне знать, если пропустили, что вы пытаетесь сделать.

...