Img over Bootstrap Carousel - PullRequest
Новая
       2

Img over Bootstrap Carousel

1 голос
/ 17 октября 2019

Мне нужно получить мобильное изображение с изменением изображения внутри (скольжение);поэтому я подумал, что карусель Bootstrap, наложенная на другое изображение, должна делать эту работу.

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

<section>
    <h2 style="text-align: center;">Online Dashboard</h2>
    <div class="row" style="margin: 50px 0;">
        <div class="col-6" align="center">
            <div class="carousel slide" data-ride="carousel" style="position: absolute; left: 0; height: 100px; width: 50px;">
                <div class="carousel-inner">
                    <div class="carousel-item active" data-interval="1000">
                    <img src="resources/assets/images/oneplus6_phone_blue_screen.png" style="height: 100px;">
                </div>
                <div class="carousel-item" data-interval="1000">
                    <img src="resources/assets/images/oneplus6_phone_red_screen.png" style="height: 100px;">
                </div>
            </div>
            <img src="resources/assets/images/oneplus6_phone.png" style="position: absolute; top: 0; left: 0; height: 100px;">  
        </div>
    </div>
</section>
<section>
    <div class="row align-items-center justify-content-center">
        <div class="col-lg-4">
            <h2>We love brainstorming ideas!</h2>
            <a href="mailto:info@example.com?Subject=Website-Contact%20Form" target="_top"><button type="button" class="btn btn-outline-danger heartbeat">Contact Us!</button></a>
        </div>
    </div>
</section>

Ответы [ 2 ]

1 голос
/ 17 октября 2019

Вы можете использовать этот код 

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <!--Carousel Wrapper-->
  <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
    <!--Indicators-->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-2" data-slide-to="1"></li>
      <li data-target="#carousel-example-2" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->
    <!--Slides-->
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <div class="view">
          <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
          <div class="mask rgba-black-light"></div>
        </div>
        <div class="carousel-caption">
          <h3 class="h3-responsive">Light mask</h3>
          <p>First text</p>
        </div>
      </div>
      <div class="carousel-item">
        <!--Mask color-->
        <div class="view">
          <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
          <div class="mask rgba-black-strong"></div>
        </div>
        <div class="carousel-caption">
          <h3 class="h3-responsive">Strong mask</h3>
          <p>Secondary text</p>
        </div>
      </div>
      <div class="carousel-item">
        <!--Mask color-->
        <div class="view">
          <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
          <div class="mask rgba-black-slight"></div>
        </div>
        <div class="carousel-caption">
          <h3 class="h3-responsive">Slight mask</h3>
          <p>Third text</p>
        </div>
      </div>
    </div>
    <!--/.Slides-->
    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel-example-2" 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="#carousel-example-2" 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-->
  <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>
</body>

</html>
0 голосов
/ 17 октября 2019

Вы можете попробовать z-index со значением 1, ползунок (фоновый, если я хорошо понял) и z-index со значением 2 или выше для мобильного изображения. Или вы можете инвертировать значение z-index, чтобы сделать слайдер поверх мобильного изображения.

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

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

...