css

/*Slide*/

.containerproje{
position: relative;
}

.containerproje .slide-container .slide{

min-height: 100vh;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
padding: 20px 9%;
padding-bottom: 70px;
}

.containerproje .slide-container .slide .contentproje{

flex: 1 1 350px;
animation: slideContent .4s linear .4s backwards;
}

@keyframes slideContent{0%`
{
opacity: 0;
transform: translateX(-50px);
}
}

.containerproje .slide-container .slide .contentproje h3{

font-size: 35px;
color: black;
font-family: pacifico, serif;
}

.containerproje .slide-container .slide .contentproje p{

font-size: 16px;
color: black;
font-family: pacifico, serif;
width: 40%;
height: 10%;
}

.containerproje .slide-container .slide .contentproje .btnproj{

margin-top: 10px;
display: inline-block;
background: #0071bc;
color: white;
font-size: 17px;
padding: 9px 40px;
border-radius: 5px;
border: 2px solid #0071bc;
font-family: pacifico, serif;
text-decoration: none;
}

.containerproje .slide-container .slide .contentproje .btnproj:hover{

 background: #0071bc;
border: 2px solid #0071bc;
color: white;
}

.containerproje .slide-container{
display: none;
}

.containerproje .slide-container.active{
display: block;
}

.containerproje .slide-container:nth-child(1) .slide{

background: url(./imagens/c1.jpg);
background-size: cover;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
}

.containerproje .slide-container:nth-child(2) .slide{

background: url(./imagens/g1.jpg);
background-size: cover;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
}

.containerproje .slide-container:nth-child(3) .slide{

background: url(./imagens/p2.jpg);
background-size: cover;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
}

.containerproje .slide-container:nth-child(4) .slide{

background: url(./imagens/g2.jpg);
background-size: cover;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
}

.containerproje #prev,
.containerproje #next{
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
background: #0071bc;
height: 50px;
width: 50px;
line-height: 50px;
font-size: 25px;
text-align: center;
cursor: pointer;
font-weight: bolder;
 border-radius: 50px;
}

.containerproje #prev:hover,
.containerproje #next:hover{
background: #0071bc;
border: 2px solid #0071bc;
color: white;
}

.containerproje #prev{
left: 20px;
}

.containerproje #next{
right: 20px;
}

/*Slide*/ css

java

let slides = document.querySelectorAll('.slide-container');

let indexa = 0;

function next() {
slides[indexa].classList.remove('active');
indexa = (indexa + 1) % slides.length;
slides[indexa].classList.add('active');
}

function prev() {
slides[indexa].classList.remove('active');
indexa = (indexa - 1 + slides.length) % slides.length;
slides[indexa].classList.add('active');
}

setInterval(next, 7000);

java

html

<section class="containerproje">
<div class="slide-container active">
<div class="slide">
<div class="contentproje">
<h3>AnimalArk</h3>
<p>SEJA BEM-VINDO(A) AO CENTRO DE VETERINARIO ANIMALARK!</p>
 <a href="#" class="btnproj">Saiba mais</a>
</div>
</div>
</div>

<div class="slide-container">
<div class="slide">
<div class="contentproje">
<h3>AnimalArk</h3>
<p>SEJA BEM-VINDO(A) AO CENTRO DE VETERINARIO ANIMALARK!</p>
<a href="#" class="btnproj">Saiba mais</a>
</div>
</div>
</div>

<div class="slide-container">
<div class="slide">
<div class="contentproje">
<h3>AnimalArk</h3>
<p>SEJA BEM-VINDO(A) AO CENTRO DE VETERINARIO ANIMALARK!</p>
<a href="#" class="btnproj">Saiba mais</a>
</div>
</div>
</div>

<div class="slide-container">
<div class="slide">
<div class="contentproje">
<h3>AnimalArk</h3>
<p>SEJA BEM-VINDO(A) AO CENTRO DE VETERINARIO ANIMALARK!</p>
<a href="#" class="btnproj">Saiba mais</a>
</div>
</div>
</div>

<div id="prev"> < </div>

<div id="next"> > </div>
</section>
<script src="slides.js"></script>

html