Bootstrap 4 карусель-анимация не работает должным образом - PullRequest
Новая
       1

Bootstrap 4 карусель-анимация не работает должным образом

2 голосов
/ 18 февраля 2020

Итак, я работал над своим веб-проектом, где я использовал форму поверх карусели, используя css. Он отлично работает с анимацией скольжения, но когда я добавляю класс carousel-fade, форма в центре также исчезает с каруселью, но я хочу предотвратить это. Здесь, в примере, вместо этой большой формы я использовал простой тег <div> для демонстрации. Как я могу решить эту проблему? 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"> 
</script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  
  <script>
  $(function(){
  $('.carousel').carousel({
    interval: 1000
  }) ;
  }) ;
  </script>
  
  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  
  <style>
  /*CSS*/
#vcenter {
   position: absolute ;
   top: 55%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-weight: bold ;
}

div#back1{
   background-image: url('https://images.pexels.com/photos/11744/pexels-photo-11744.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
   height: 100vh ;
   background-attachment: scroll;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

div#back2{
   background-image: url('https://images.pexels.com/photos/207130/pexels-photo-207130.jpeg?    auto=compress&cs=tinysrgb&dpr=1&w=500');
   height: 100vh ;
   background-attachment: scroll;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

div#back3{
   background-image: url('https://images.pexels.com/photos/1178683/pexels-photo-1178683.jpeg?    auto=compress&cs=tinysrgb&dpr=1&w=500');
   height: 100vh ;
   background-attachment: scroll;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}
  
</style>


<body>

<!-- carousel -->
<div class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div id="back1"></div>
      </div>
      <div class="carousel-item">
        <div id="back2"></div>
      </div>
      <div class="carousel-item">
        <div id="back3"></div>
      </div>
    </div>
</div>

<div id="vcenter" class="container">
  <p class="text-center text-primary">I am at center</p>
</div>

</body>

Ответы [ 3 ]

2 голосов
/ 18 февраля 2020

Добавить z-index: 1; css свойство к #vcenter .. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"> 
</script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  
  <script>
  $(function(){
  $('.carousel').carousel({
    interval: 1000
  }) ;
  }) ;
  </script>
  
  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  
  <style>
  /*CSS*/
#vcenter {
   position: absolute ;
   top: 55%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-weight: bold ;
   z-index: 1;
}

div#back1{
   background-image: url('https://images.pexels.com/photos/11744/pexels-photo-11744.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
   height: 100vh ;
   background-attachment: scroll;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

div#back2{
   background-image: url('https://images.pexels.com/photos/207130/pexels-photo-207130.jpeg?    auto=compress&cs=tinysrgb&dpr=1&w=500');
   height: 100vh ;
   background-attachment: scroll;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

div#back3{
   background-image: url('https://images.pexels.com/photos/1178683/pexels-photo-1178683.jpeg?    auto=compress&cs=tinysrgb&dpr=1&w=500');
   height: 100vh ;
   background-attachment: scroll;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}
  
</style>


<body>

<!-- carousel -->
<div class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div id="back1"></div>
      </div>
      <div class="carousel-item">
        <div id="back2"></div>
      </div>
      <div class="carousel-item">
        <div id="back3"></div>
      </div>
    </div>
</div>

<div id="vcenter" class="container">
  <p class="text-center text-primary">I am at center</p>
</div>

</body>
0 голосов
/ 18 февраля 2020

Просто добавьте z-index выше 1 к #vcenter: 

#vcenter {
   position: absolute ;
   top: 55%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-weight: bold ;
   z-index: 9;
}

Это необходимо, потому что активный слайд имеет z-index 1. Проверьте это сами. :)

0 голосов
/ 18 февраля 2020

Удалите этот класс 'carousel-fade' из первого div, и если вы хотите добавить какой-либо дополнительный класс, тогда вместо имени класса карусели по умолчанию вы использовали свое собственное имя класса.

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

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

...