Использование изображения в карусели Boostrap, кроме фона для слайда - PullRequest
Новая
       11

Использование изображения в карусели Boostrap, кроме фона для слайда

0 голосов
/ 03 февраля 2019

Я пытаюсь использовать изображение в начальной загрузке карусели так же, как текст, как один заголовок на левом боковом изображении в середине и второй заголовок на правой стороне, как у меня на прикрепленном изображении. Прикрепленное изображение как ожидаемая карусельнужно:

enter image description here

Но когда я пробую это на загрузочной карусели, изображение у меня спускается с тела карусели.Что я сделал, так это то, что я назначил карусели высоту 500 пикселей и поместил, а затем центрировал карусель с абсолютным позиционированием 

.carousel{
  position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     width: 50%;
     height: 30%;
     margin: auto;
}

, она хорошо работает с текстом, но когда я добавляю изображение, оно снова меняет егоположение и идет вниз по кадру. Как прикреплено на изображении, что я получаю:

enter image description here

Я хочу вернуть его обратно

мой HTML-код 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="js/bootstrap/bootstrap.js"></script>
  <!--  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900" rel="stylesheet">-->
  </head>
  <body>
<div class="container-fluid">
  <div class="row header flex-container">
    <div class="sidebar-header">

    </div>
    <div class="main-bg">
      <div class="row">
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
                    <li class="get-quote"><a href="#">Get quote</a></li>
          </ul>
        </nav>
      </div>
      <div class="row">
        <div class="main-slider">
          <div class="container-fluid">

            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active">01</li>
                <li data-target="#myCarousel" data-slide-to="1">02</li>
                <li data-target="#myCarousel" data-slide-to="2">03</li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                  <img class="slider-height" src="img/bag.png">
                </div>


              </div>

              <!-- Left and right controls -->

            </div>
          </div>

        </div>
      </div>

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

  </body>
</html>

мой CSS 

.main-slider{
  height: 500px;
  text-align: center;

position: relative;
  max-height: 100%;
  background-color: #FFD731;
}
.carousel{
  position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     width: 50%;
     height: 30%;
     margin: auto;
}
.carousel-indicators {
    position: absolute;

    left: 150%;
    z-index: 15;

    text-align: center;
    list-style: none;
}
.carousel-indicators li {
    display:block;
    width: 10px;
    height: 10px;
    margin: 10px;
    text-indent:0px;
    cursor: pointer;
    background-color: #000 \9;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: none;
}
.carousel-indicators .active {
    width: inherit;
    height: inherit;
    margin: inherit;
    background-color:transparent;
}

1 Ответ

0 голосов
/ 03 февраля 2019

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

<div class="item active">
  <img class="slider-height" src="img/bag.png">
</div>
<div class="item">
  <img class="slider-height" src="img/ANOTHER-IMAGE.png">
</div>
<div class="item">
  <img class="slider-height" src="img/A-THIRD-IMAGE.png">
</div>

Просто вы не испытываете какое-то странное поведение из-за этого, когда пытаетесь решить другую проблему.

Решение вашего актуального вопроса

Это было бы для размещения изображения в центре-центре item.Ухх ... Погоди!Разве item не должно быть carousel-item ( ref )?Иначе стиль может испортиться?

Тем не менее ... Я бы добавил эту CSS, чтобы решить: 

.item, 
.carousel-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Он использует Flexbox , чтобы расположить изображение в центре-центреобраз.

Надеюсь, я правильно понял ваш вопрос.

...