Reputation: 303

Bootstrap 4 carousel-fade animation not working properly

So I was working on my web project where I used form over carousel using css. It's working perfectly with sliding animation but when I am adding class carousel-fade the form at the center is also fading with the carousel but I want to prevent that. Here, In example instead of that big form I used a simple <div> tag for demonstration. How can I solve this issue ?

<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>

Upvotes: 2

Answers (3)

Razvan Zamfir

Reputation: 4626

Just add a z-index higher then 1 to #vcenter:

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

You need that because the active slide has a z-index of 1. Check that yourself. :)

Upvotes: 0

Maniraj Murugan

Reputation: 9084

Add z-index: 1; css property to #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>

Upvotes: 2

Montu Khant

Reputation: 25

Remove this class 'carousel-fade' from first div and if you want to add any extra class then used your own class name instead of default carousel class name.

Upvotes: 0

Bootstrap 4 carousel-fade animation not working properly

Answers (3)

Related Questions