CODEWITHSUNDEEP
jqueryhtml
Franky238
Franky238

Reputation: 519

Cycle between multiple images

I have this problem: I would like to change the src attribute of an img element in a continuous loop.

Here is my HTML and jQuery code: 

<img id="changeSlider" src="{{asset('uploads/photos/')}}{{photo.path}}" alt="">
<script type="text/javascript">
$(document).ready(function() {
    var i = 1;
    while(i < 10) {
        $("#changeSlider").attr('src', '{{asset("uploads/photos/")}}{{photos[0].path}}').delay(3000);
        i++;
    }
});
</script>

Upvotes: 0

Views: 132

Answers (1)

fast
fast

Reputation: 885

You can update the image path on a regular timebase by setIntervall and cycle through the images (assuming a function that can generate the image url based on the index):

var count = 20; // actual number of available photos
var next = 0;

window.setInterval(showNextImage, 3000);

function showNextImage() {
 $('#changeSlider').prop('src', URL_OF_PHOTO(next));
 next = (++next)%count;
}

Upvotes: 2

Related Questions