Listar array de imagens de um response
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>
*
Discussão (2)
Carregando comentários...