Galeria de fotos

[Marcelo Mariniello Coelho 0]

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)">&#10094;</a>

            <a class="next" onclick="plusSlides(1)">&#10095;</a>

 

    </section>