Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>
*
Carregando comentários...