примерка видео в слайдере (Bootstrap 4.0) - PullRequest
Новая
       5

примерка видео в слайдере (Bootstrap 4.0)

0 голосов
/ 13 мая 2018

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

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

Вот код, который я использую: 

/*!
 * Start Bootstrap - Half Slider (https://startbootstrap.com/template-overviews/half-slider)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-half-slider/blob/master/LICENSE)
 */

@charset "UTF-8";

/* Body */

body {
  width: 50%;
  margin: auto;
}

.carousel-item {
  height: 65vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.carousel-item iframe {
  margin-top: 55px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.tales {}

.iframe {
  max-height: 40% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>


<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Half Slider - Start Bootstrap Template</title>

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="css/half-slider.css" rel="stylesheet">

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Fact Attack</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <header>
    <!--Carousel Wrapper-->
    <div id="video-carousel-example2" class="carousel slide carousel-fade" data-ride="carousel">
      <!--Indicators-->
      <ol class="carousel-indicators">
        <li data-target="#video-carousel-example2" data-slide-to="0" class="active"></li>
        <li data-target="#video-carousel-example2" data-slide-to="1"></li>
        <li data-target="#video-carousel-example2" data-slide-to="2"></li>
      </ol>
      <!--/.Indicators-->
      <!--Slides-->
      <div class="carousel-inner" role="listbox">
        <!-- First slide -->
        <div class="carousel-item active">
          <!--Mask color-->
          <div class="view">
            <!--Video source-->
            <div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

            <div class="mask rgba-indigo-light"></div>
          </div>

          <!--Caption-->
          <div class="carousel-caption">
            <div class="animated fadeInDown">
              <h3 class="h3-responsive text-dark">Light mask</h3>
            </div>
          </div>
          <!--Caption-->
        </div>
        <!-- /.First slide -->

        <!-- Second slide -->
        <div class="carousel-item">
          <!--Mask color-->
          <div class="view">
            <!--Video source-->
            <div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

            <div class="mask rgba-indigo-light"></div>
          </div>

          <!--Caption-->
          <div class="carousel-caption">
            <div class="animated fadeInDown">
              <h3 class="h3-responsive">Super light mask</h3>
            </div>
          </div>
          <!--Caption-->
        </div>
        <!-- /.Second slide -->

        <!-- Third slide -->
        <div class="carousel-item">
          <!--Mask color-->
          <div class="view">
            <!--Video source-->
            <div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

            <div class="mask rgba-indigo-light"></div>
          </div>

          <!--Caption-->
          <div class="carousel-caption">
            <div class="animated fadeInDown">
              <h3 class="h3-responsive">Strong mask</h3>
            </div>
          </div>
          <!--Caption-->
        </div>
        <!-- /.Third slide -->
      </div>
      <!--/.Slides-->
      <!--Controls-->
      <a class="carousel-control-prev" href="#video-carousel-example2" 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="#video-carousel-example2" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
      <!--/.Controls-->
    </div>
    <!--Carousel Wrapper-->
  </header>

  <!-- Page Content -->
  <section class="py-5">
    <div class="container">
      <h1>Half Slider by Start Bootstrap</h1>
      <p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the
        <code>half-slider.css</code> file.
      </p>
    </div>
  </section>

  <!-- Footer -->
  <footer class="py-5 bg-dark">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; Your Website 2018</p>
    </div>
    <!-- /.container -->
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</body>

</html>

Спасибо за вашу помощь, и просто скажите мне, если вам нужно узнать что-то еще:)

1 Ответ

0 голосов
/ 13 мая 2018

Сначала вам нужно исправить макет.Все содержимое тела должно быть внутри container, row и col-12. 

<div class="container">
  <div class="row">
    <div class="col-12">

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

Весь код, связанный с каруселью, должен находиться внутри col-12.При этом ширина карусели такая же, как у nav, и с обеих сторон есть свободное пространство.

Контроллеры расположены absolute.Двое из их родителей расположены relative.Если у вас недостаточно информации о позиционировании CSS, прочитайте эту запись .

Существует несколько способов вывести контроллеры за пределы карусели.

Метод 1

  1. Поместите код двух контроллеров под контейнером. 

<div class="container">
  <div class="row">
    <div class="col-12">

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

<a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon bg-danger" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
  <span class="carousel-control-next-icon bg-danger" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>
Поместите весь приведенный выше код в другой элемент класса position-relative. 

<div class="position-relative">
  <div class="container">
    <div class="row">
      <div class="col-12">




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

  <a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon bg-danger" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
    <span class="carousel-control-next-icon bg-danger" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

Проверьте это ручка

Метод 2

Переопределите свойство position карусели и col-12 используя код ниже.Они относительно расположены. 

.position-initial {
  position: initial !important;
}

<div class="postion-relative">
  <div class="container">
    <div class="row">
      <header class="col-12 position-initial">
        <!--Carousel Wrapper-->
        <div id="video-carousel-example2" class="carousel slide carousel-fade position-initial" data-ride="carousel">

        </div>
      </header>

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

Теперь, поскольку класс div с position-relative имеет полную ширину и контроллеры расположены на absolutely, контроллер находится внутри full-width div.

Проверьте это ручка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...