Scribd
Upload
5 views

Slide

The document contains CSS code to style slides for a slideshow component. It includes styles for slide containers, content, buttons, and navigation arrows. It also includes JavaScript code to handle changing the active slide and transition between slides automatically. The HTML defines the slide content and structure and links to the JavaScript file.

Uploaded by

junypg14
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

Slide

The document contains CSS code to style slides for a slideshow component. It includes styles for slide containers, content, buttons, and navigation arrows. It also includes JavaScript code to handle changing the active slide and transition between slides automatically. The HTML defines the slide content and structure and links to the JavaScript file.

Uploaded by

junypg14
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like