Create Random image slideshow

Question

i have a website live at the moment and the images desplay in sequence i want to add a little dynamics with the slider and make it so it randomly displays the images instead this is the basic code:

    <div class="container slideshowContainer" style="width: 100%;">
        <!-- BEGIN REVOLUTION SLIDER -->    
        <div class="fullwidthbanner-container slider-main margin-bottom-10">
            <div class="fullwidthabnner">
                <ul id="revolutionul" style="display:none;">                                                                                       
                    <!-- OUTPUT THE SLIDES -->
                    <?php
                        foreach($slides as $d){
                    ?>

                        <li data-transition="fade" data-slotamount="8" data-masterspeed="700" data-delay="9400" data-thumb="assets/img/sliders/revolution/thumbs/thumb2.jpg">
                                        <?php if($d['slideshow_image_sub_title_4'] != ""){ ?>
                                <a href="<?php echo $d['slideshow_image_sub_title_4']; ?>">
                                    <img src="uploads/images/<?php echo $d['slideshow_image_file']; ?>" title="<?php echo $d['slideshow_image_title']; ?>" style="width: 100%;" />
                                </a>                                
                            <?php } else { ?>
                                    <img src="uploads/images/<?php echo $d['slideshow_image_file']; ?>" title="<?php echo $d['slideshow_image_title']; ?>" style="width: 100%;" />
                            <?php } ?>
                        </li>
                        <?php
                        }
                    ?>                      
                </ul>
                <div class="tp-bannertimer tp-bottom"></div>
            </div>
        </div>
        <!-- END REVOLUTION SLIDER -->
    </div>    

how can i modify this to help randomly display images please ask if i need to provide more info

Thanks in advance

Answer 1

Try this:

div class="container slideshowContainer" style="width: 100%;">
    <!-- BEGIN REVOLUTION SLIDER -->    
    <div class="fullwidthbanner-container slider-main margin-bottom-10">
        <div class="fullwidthabnner">
            <ul id="revolutionul" style="display:none;">                                                                                       
                <!-- OUTPUT THE SLIDES -->
                <?php
                    shuffle($slides);
                    foreach($slides as $d){
                ?>

                    <li data-transition="fade" data-slotamount="8" data-masterspeed="700" data-delay="9400" data-thumb="assets/img/sliders/revolution/thumbs/thumb2.jpg">
                                    <?php if($d['slideshow_image_sub_title_4'] != ""){ ?>
                            <a href="<?php echo $d['slideshow_image_sub_title_4']; ?>">
                                <img src="uploads/images/<?php echo $d['slideshow_image_file']; ?>" title="<?php echo $d['slideshow_image_title']; ?>" style="width: 100%;" />
                            </a>                                
                        <?php } else { ?>
                                <img src="uploads/images/<?php echo $d['slideshow_image_file']; ?>" title="<?php echo $d['slideshow_image_title']; ?>" style="width: 100%;" />
                        <?php } ?>
                    </li>
                    <?php
                    }
                ?>                      
            </ul>
            <div class="tp-bannertimer tp-bottom"></div>
        </div>
    </div>
    <!-- END REVOLUTION SLIDER -->
</div>    

http://php.net/manual/de/function.shuffle.php

Answer 2

I'm pretty sure there is a better answer than this, but the way I accomplish this is by naming the pictures using numbers, and using the following code to load them:

<img src="uploads/images/<?php.rand(1,9).".jpg";?>">

I hope this helps.