Question

I have the following images in that I’m using for a carousel. Each time the page loads I want them in in a different order. I was thinking of just ordering the numbers using a random number generator, but then I’m not sure how to make it so that the numbers are used only once. If this could be done in a loop so it’s expandable that would be great.

See the static code below, all the images are named the same except for the number at the end

        <div class="image-entry">
            <img src="/images/carousel-1.jpg" />
        </div>
        <div class="image-entry">
            <img src="/images/carousel-2.jpg" />
        </div>
        <div class="image-entry">
            <img src="/images/carousel-3.jpg" />
        </div>
        <div class="image-entry">
            <img src="/images/carousel-4.jpg" />
        </div>

thanks!

Answer 1

There is a function for that, shuffle():

$images = array
(
    '/images/carousel-1.jpg',
    '/images/carousel-2.jpg',
    '/images/carousel-3.jpg',
    '/images/carousel-4.jpg',
);

shuffle($images); // the magic

foreach ($images as $image)
{
    echo '<div class="image-entry">';
    echo "\t" . '<img src="' . $image . '" />';
    echo '</div>';
}