Galeria de fotos
Pessoal, boa noite!
Preciso criar uma galeria de fotos simples para um projeto. Tentei usar o código abaixo, no entanto, näo sei pq não funciona quando levo para o meu projeto. Somente me mostra a primeira imagem quando levo para meu projeto, sem aplicar o css , nem o js.
Se alguem tiver um código de sugestão para esse projeto também aceito, rs. Estou tentando fazer uma galeria de fotos para um site de Arquitetura onde tem o título do projeto com as fotos disponíveis para visualização com setas.
JS
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
ga('send', 'event', 'galeria', 'next_prev', 'Titulo da página');
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides*.style.display **=** **"**none**"**;**
**
*
*
}
*
*
*
*
slides[slideIndex - 1].style.display = "block";
*
*
*
*
}
*
*
*
*
**
CSS
*
*
**
*
*
*
*
*
*
form{**
*
*
*
*
font-size: 16px;
*
*
*
*
background: #CCC;**
*
*
*
*
max-width: 500px;
*
*
*
*
margin: 0 auto;**
*
*
*
*
padding: 0 10px 10px 10px;
*
*
*
*
border-radius: 5px;
*
*
*
*
}
*
*
*
*
h1{**
*
*
*
*
color: #333;**
*
*
*
*
text-align: center;**
*
*
*
*
font-size: 50px;
*
*
*
*
}
*
*
*
*
input, textarea{**
*
*
*
*
width: 470px;
*
*
*
*
padding: 10px;
*
*
*
*
}
*
*
*
*
.enviar input{
*
*
*
*
background: #069;**
*
*
*
*
height: 40px;
*
*
*
*
width: 150px;
*
*
*
*
font-weight: bold;**
*
*
*
*
border-radius: 5px;
*
*
*
*
border: 1px solid;
*
*
*
*
color: #FFF;**
*
*
*
*
cursor: pointer;**
*
*
*
*
}
*
*
*
*
.enviar input:hover{
*
*
*
*
background: #078;**
*
*
*
*
}
*
*
*
*
textarea{**
*
*
*
*
width: 470px;
*
*
*
*
height: 120px;
*
*
*
*
line-height: 20px;
*
*
*
*
}
*
*
*
*
**
*
*
**
HTML
*
*
**
*
*
*
*
*
*
<section class="wrap">
*
*
*
*
<div class="mySlides fade"> <!-- 01 -->**
*
*
*
*
<div class="numbertext">01 / 05</div>
*
*
*
*
<img class="imgslide" src="novo_projeto/assets/Casa_R_e_k/FRONTAL2.jpeg" alt="Fronta 2"/>
*
*
*
*
<div class="text">CASA R E K </div>
*
*
*
*
</div>
*
*
*
*
<div class="mySlides fade"> <!-- 02 -->**
*
*
*
*
<div class="numbertext">02 / 05</div>
*
*
*
*
<img class="imgslide" src="novo_projeto/assets/Casa_R_e_k/LATERAL 2.jpeg" alt="LATERAL 2"/>
*
*
*
*
<div class="text">CASA R E K</div>
*
*
*
*
</div>
*
*
*
*
<div class="mySlides fade"> <!-- 03 -->**
*
*
*
*
<div class="numbertext">03 / 05</div>
*
*
*
*
<img class="imgslide" src="novo_projeto/assets/Casa_R_e_k/LATERAL 4.jpeg" alt="LATERAL 4"/>
*
*
*
*
<div class="text">CASA R E K</div>
*
*
*
*
</div>
*
*
*
*
<div class="mySlides fade"> <!-- 04 -->**
*
*
*
*
<div class="numbertext">04 / 05</div>
*
*
*
*
<img class="imgslide" src="novo_projeto/assets/Casa_R_e_k/LATERAL 6.jpeg" alt="LATERAL 6"/>
*
*
*
*
<div class="text">CASA R E K</div>
*
*
*
*
</div>
*
*
*
*
<div class="mySlides fade"> <!-- 05 -->**
*
*
*
*
<div class="numbertext">05 / 05</div>
*
*
*
*
<img class="imgslide" src="novo_projeto/assets/Casa_R_e_k/LATERAL 7.jpeg" alt="LATERAL 7"/>
*
*
*
*
<div class="text">CASA R E K</div>
*
*
*
*
</div>
*
*
*
*
<!--Final Slides-->**
*
*
*
*
<!--Navigation-->**
*
*
*
*
<a class="prev" onclick="plusSlides(-1)">❮</a>**
*
*
*
*
<a class="next" onclick="plusSlides(1)">❯</a>
*
*
*
*
</section>
*
*
**
*
*
*
Discussão (0)
Carregando comentários...