JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div id="carousel-fade" class="carousel fade">
  <div class="carousel-inner">
		<div class="item active ">
			<img src="https://thanet-web-design.com/PIZZA/wp-content/uploads/2020/12/PIZZARIACAPRI202029-1.jpg" alt="" />
         

      </div>
    <div class="item">
			<img src="https://thanet-web-design.com/PIZZA/wp-content/uploads/2020/12/PIZZARIACAPRI202022-1.jpg" alt="" width="100%">
		</div>
		<div class="item">
			<img src="https://thanet-web-design.com/PIZZA/wp-content/uploads/2020/12/PIZZARIACAPRI20203-1.jpg" alt="" width="100%">	 
		</div>
  </div>
</div>

CSS

.carousel.fade{
	opacity:1
}
.carousel.fade>.carousel-inner>.item{
	-moz-transition:opacity ease-in-out .6s;
	-o-transition:opacity ease-in-out .6s;
	-webkit-transition:opacity ease-in-out .6s;
	transition:opacity ease-in-out .6s;
	left:0 !important;
	opacity:0;
	top:0;
	position:absolute;
	width:100vw;
  height:100vh;
	display:block !important;
	z-index:1; 
}
.carousel.fade>.carousel-inner>.item:first-child{
	top:auto;
	position:relative;
}
.carousel.fade>.carousel-inner>.active{
	opacity:1;
	-moz-transition:opacity ease-in-out 3s;
	-o-transition:opacity ease-in-out 3s;
	-webkit-transition:opacity ease-in-out 3s;
	transition:opacity ease-in-out 3s;
	z-index:2
} 
.item img{transform: scale(1); transition:all 3s;} 
.item.active img {transform: scale(1.2); } 

.item.active > .parallax-content .content1,.content2,.content3{display:block; width:100%}

JavaScript

$('#carousel-fade').carousel({
  interval: 8000,
  cycle: true
  
})