Pesquisar na Comunidade
Mostrando resultados para as tags ''l''.
Encontrado 1 registro
-
Boa tarde pessoal, eu tenho um ajax em que mando buscar as imagens de um determinado item, pois bem, eu recebo essas imagens, são 3 neste caso, porém quando eu exibo essas imagens no meu slide, somente uma delas é exibida, as outras não, é um slide em que eu preencho com javascript, faço o foeach e no foreach eu aplico um console.log(imagens) ele exibe as 3 certinha, somente no slide que so aparece a primeira, alguém já criou um slide de forma dinamica no estilo que estou fazendo possa me auxiliar ? O codigo é o seguinte: <code> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="modal-body"> <div class="row"> <div class="col-1 align-middle text-center" style="margin-top: 15%;"> <a onclick="plusSlides(-1)"> <i class="fas fa-chevron-left fa-5x"></i></a> </div> <div class="slideBelongings"></div> <div class="col-1 align-middle text-center" style="margin-top: 15%;"> <a onclick="plusSlides(1)"> <i class="fas fa-chevron-right fa-5x"></i></a> </div> <div class="col-10 text-center mySlides"> <div class="numbertext">1 / 4</div> <img src="" class="img-fluid img-belongings" style="max-width: 400px;"> </div> <div class="col-10 text-center mySlides"> <div class="numbertext">2 / 4</div> <img src="" class="img-fluid img-belongings"> </div> <div class="col-10 text-center mySlides"> <div class="numbertext">3 / 4</div> <img src="" class="img-fluid img-belongings"> </div> <div class="col-10 text-center mySlides"> <div class="numbertext">4 / 4</div> <img src="" class="img-fluid img-belongings"> </div> <div class="caption-container"> <p id="caption"></p> </div> <div class="row"> <div class="col-3"> <img src="https://dummyimage.com/600x400/ccc/000&text=foto" class="img-thumbnail"> </div> <div class="col-3"> <img src="https://dummyimage.com/600x400/eee/000&text=foto" class="img-thumbnail"> </div> <div class="col-3"> <img src="https://dummyimage.com/600x400/eee/000&text=foto" class="img-thumbnail"> </div> <div class="col-3"> <img src="https://dummyimage.com/600x400/eee/000&text=foto" class="img-thumbnail"> </div> </div> </div> </div> <script> let getImages = $('#get-images'); $(getImages).click(function() { let lot = $(this).data('lot'); $.ajax({ url: "{{ route('logistic.belongings.get-images') }}", method: 'get', data: { lot: lot }, success: function(response) { images = response.contents; console.log(images) let imgBelongings = document.querySelector('.img-belongings'); let imgThumbnails = document.querySelector('.img-thumbnail'); let $slideBelongings = $('.slideBelongings'); var html = ''; images.forEach(function(image) { imgBelongings.setAttribute('src', image); imgThumbnails.setAttribute('src', image); }); //showSlides(1); // for (i = 0; i < images.length; i++) { // imgBelongings.setAttribute('src', images); // imgThumbnails.setAttribute('src', images); // } } }); }); //Slides let slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { // setTimeout(() => { // console.log('showSlides'); let i; let slides = document.getElementsByClassName("mySlides"); let imgThumbnail = document.getElementsByClassName("img-thumbnail"); let captionText = document.getElementById("caption"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < imgThumbnail.length; i++) { imgThumbnail[i].className = imgThumbnail[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; imgThumbnail[slideIndex - 1].className += " active"; captionText.innerHTML = imgThumbnail[slideIndex - 1].alt; //}, 2000); } </script> </body> </html> </code>
