# Bootstrap Carousel Image Swap



## howard.a.s (Jul 22, 2005)

I seem to be asking perhaps more than my fair share of questions just at the moment. Sorry!

Relating to the carousel here: https://bootstrapious.com/p/bootstrap-carousel
https://bootstrapious.com/p/bootstrap-carousel
Is it possible to make a set of 4 images change order each time the page loads - or perhaps for a completely new set of images to be selected each time the page loads.

Just wondered if this might be a simple matter?


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> Is it possible to make a set of 4 images change order each time the page loads - or perhaps for a completely new set of images to be selected each time the page loads.


These can be done using the _*random number generator*_ in PHP, which can then be fed into the carousel html 
I shall spend a bit of time this morning to produce an example and post the result - WATCH THIS SPACE


----------



## JiminSA (Dec 15, 2011)

Howard, this example doesn't exactly follow your requirements, inasmuch as I have coded for displaying 4 images in random order but have not coded for different sets of images. Instead I have 8 images in the carousel folder (2 sets) - sheer laziness on my part but at least it gives you something to code
*Live example*
The code:

```
<?php
    session_start();
    $first = true;
    $slide_array = array();
    $slide_array = array_fill(0, 8, 0);
?>
<!DOCTYPE html>

    Basic HTML File

    

        
        [LIST=1]
            [*]
            [*]
            [*]
            [*]
        [/LIST]
        

<?php
    $x = 1;
    while($x <= 4) // produce a carousel with 4 slides
    {
        $slide = rand(1,8); // a random number between 1 and 8
        $sub = $slide - 1;
        if($slide_array[$sub] == false) // slide unused? - then use - this avoids slide duplication
        {
            $slide_array[$sub] = true; // show slide has been used
            if($first)
            {
                $first = false;
?>

                [IMG alt="Slide"]images/carousel/<?=$slide?>.jpg[/IMG]

<?php          
            }
            else
            {
?>

                [IMG alt="Slide"]images/carousel/<?=$slide?>.jpg[/IMG]

<?php
            }
            $x++;
        }
    }
?>

        
        [URL=#myCarousel]

        [/URL]
        [URL=#myCarousel]

        [/URL]

[B][SIZE=15][URL=javascript:void(0);][I][/I] Refresh the page to show different pictures ...[/URL][/SIZE][/B]
```


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> I seem to be asking perhaps more than my fair share of questions just at the moment. Sorry!


You will never overask as far as I'm concerned - your queries are always interesting and sometimes a bit of a challenge


----------



## howard.a.s (Jul 22, 2005)

I love tinkering around with code, although given my understanding of the subject (or rather lack of it) I have to admit that I often seem to find myself asking questions about how to do things that really push my understanding to its limits. Just can't help myself! I guess it's called learning  Looking at the code you've posted, I am guessing

```
$slide = rand(1,8)
```
 is where I'd specify how many images are available to display. So if I wanted perhaps 4, or even 10 images, I'd alter this code to (1,4) or (1,10). Is that right? The name of each image doesn't appear to have been specified in your code, so I'm guessing that the script just chooses any image at random from those available in the images folder, no matter what each image is named. Here is my existing carousel code

```
<!-- Carousel -->
<div id="carousel-example-generic2" class="carousel slide carousel-fullscreen carousel-fade carousel slide" data-ride="carousel" data-interval="300">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
                     <li data-target="#carousel-example-generic2" data-slide-to="3"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active" style="max-width:100%;background-image: url('assets/img/slider_images/slider-a.jpg');">
                    <div class="overlay"></div>
                    <div class="carousel-caption">
                        <h1 class="super-heading"><a style="text-decoration:none;color:white;" href="http://www.mysite.com" title="my title">my text</a></h1>
                        <p class="super-paragraph" style="color:white;"><a style="text-decoration:none;" href="https://www.mysite.com" title="my title">my text</a></p>
                    </div>
                </div>
                <div class="item" style="max-width:100%;background-image: url('assets/img/slider_images/slider-b.jpg');">
                    <div class="overlay"></div>
                    <div class="carousel-caption">
                        <h1 class="super-heading"><a style="text-decoration:none;color:white;" href="http://www.mysite.com" title="my title">my test</a></h1>
                        <p class="super-paragraph" style="color:white;"><a style="text-decoration:none;" href="http://www.mysite.com" title="my title">my text</a></p>
                    </div>
                </div>
                <div class="item" style="max-width:100%;background-image: url('assets/img/slider_images/slider-c.jpg');">
                    <div class="overlay"></div>
                    <div class="carousel-caption">
                        <h1 class="super-heading"><a style="text-decoration:none;color:white;" href="http://www.mysite.com" title="my title">my text</a></h1>
                        <p class="super-paragraph" style="color:white;"><a style="text-decoration:none;" href="http://www.mysite.com" title="my title">my text</a></p>
                    </div>
                </div>
                       <div class="item" style="max-width:100%;background-image: url('assets/img/slider_images/slider-d.jpg');">
                    <div class="overlay"></div>
                    <div class="carousel-caption">
                        <h1 class="super-heading"><a style="text-decoration:none;color:white;" href="http://www.mysite.com" title="my title">my text</a></h1>
                        <p class="super-paragraph" style="color:white;"><a style="text-decoration:none;" href="http://www.mysite.com" title="my title">my text</a></p>
                    </div>
                </div>
                      </div>
            <!-- Controls -->
            <!--<a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>-->
        </div>
<!--/Carousel -->
```
which I guess I would alter to this?


```
<!-- Carousel -->
<div id="carousel-example-generic2" class="carousel slide carousel-fullscreen carousel-fade carousel slide" data-ride="carousel" data-interval="300">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
                     <li data-target="#carousel-example-generic2" data-slide-to="3"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner"
<?php
    $x = 1;
    while($x <= 4) // produce a carousel with 4 slides
    {
        $slide = rand(1,8); // a random number between 1 and 8
        $sub = $slide - 1;
        if($slide_array[$sub] == false) // slide unused? - then use - this avoids slide duplication
        {
            $slide_array[$sub] = true; // show slide has been used
            if($first)
            {
                $first = false;
?>
            <div class="item active">
                <img src="images/carousel/<?=$slide?>.jpg" alt="Slide">
            </div>
<?php       
            }
            else
            {
?>
            <div class="item">
                <img src="images/carousel/<?=$slide?>.jpg" alt="Slide">
            </div>
<?php
            }
            $x++;
        }
    }
?>
        </div>
<!--/Carousel -->
```
placing this in the head of my page, or linking to it as an external script


```
<script>
    $(document).ready(function(){
         $("#myCarousel").carousel();
    });
    </script>
    <script>
    function myFunction() {
        location.reload();
    }
    </script>
```
this will go at the very top of my page before the doctype tag


```
<?php
    session_start();
    $first = true;
    $slide_array = array();
    $slide_array = array_fill(0, 8, 0);
?>
```
the page will now be called index.php instead of index.html?

This following CSS


```
<style type="text/css">
    .carousel{
        background: #2f4357;
        margin-top: 20px;
    }
    .carousel .item{
        min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
    }
    .carousel .item img{
        margin: 0 auto; /* Align slide image horizontally center */
    }
    .bs-example{
        margin: 20px;
    }
    </style>
```
is presumably to style your example carousel, so if my carousel already has its own styling then would I still need to include this? I guess it's probably still important to add the part where it talks about preventing the carousel from being distorted if the image doesn't load?

I guess I'd then place however many images I'd like to be included in the rotation in a folder called 'images' (or whatever I choose to call this folder as long as I update the code accordingly) and everything should work! Well yes? If only everything in life was that easy.

Obviously I haven't actually tried this out yet, but something tells me that my first attempt is never going to work as intended, so please watch out for my next post asking more question!

Thank you so much for all of your time (again!) putting this together for me. I can never hope to repay you for your kindness. Am I guessing correctly that one of the photos is of you, and the rest are of where you live? Looks breathtaking and a million miles away from flat-as-a-pancake coastal Lincolnshire, U.K!


----------



## howard.a.s (Jul 22, 2005)

Looking back at what I've just posted I can already see that I have failed to include the overlay, including headline, sub headline and links. At present I have 4 images in rotation, each with its own unique headline, sub headline and links. Would this still be possible to do, even if the image for each is chosen at random


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> So if I wanted perhaps 4, or even 10 images, I'd alter this code to (1,4) or (1,10). Is that right?


Absolutely!


howard.a.s said:


> The name of each image doesn't appear to have been specified in your code, so I'm guessing that the script just chooses any image at random from those available in the images folder, no matter what each image is named.


What I did in order for the php code to work is, named my image files numerically 1.jpg through to 8.jpg, so that the random number generated applies directly to a specific image.


howard.a.s said:


> which I guess I would alter to this?


No mate, you would need to do a name change on your image files as described above i.e. make them numeric) and change the image path from images/carousel/ to assets/img/slider_images/ 


howard.a.s said:


> so if my carousel already has its own styling then will I need this?


No Howard, that styling can be dropped in favour of your own.


howard.a.s said:


> I guess it's probably important to add the part where it says to prevent the carousel from being distorted if the image doesn't load?


Nope you may drop that


howard.a.s said:


> Am I guessing correctly that the photo is of you, and the rest of where you live? Looks breathtaking and a million miles away from flat-as-a-pancake coastal Lincolnshire, U.K!


That's correct (lucky me)


----------



## howard.a.s (Jul 22, 2005)

Yes, lucky you  Did you catch my final note about the overlays?


----------



## howard.a.s (Jul 22, 2005)

Oh, and what's with the aerial photo. Don't tell me you fly as well as being a whizz with the old coding, and having Zebra as pets


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> Looking back at what I've just posted I can already see that I have failed to include the overlay, including headline, sub headline and links. At present I have 4 images in rotation, each with its own unique headline, sub headline and links. Would this still be possible to do, even if the image for each is chosen at random


Unforttunately I haven't catered for image text or links, not realising that you were using them, but one can cater for them in PHP by adding 3 new arrays: $headline_array, $sub_headline_array and $link array. These you would then initialise, by hard-coding them viz:

```
$headline_array = array();
$headline[_array0] = "First headline text";
$headline_array[1] = "Second headline text";
thru to
$headline_array[7] = "Eighth headline text";
$sub_headline_array = array();
$sub_headline_array[0] = "First sub headline";
$sub_headline_array[1] = "Second sub headline";
thru to
$sub_headline_array[7] = "Eighth sub headline";
$link_array = array();
$link_array[0] = "First link";
$link_array[1] = "Second link";
thru to
$link_array[7] = "Eighth link";
```
and then you will need to insert them 'on-the-fly' into your html much as has been done with the <img> tags. For your own PHP learning curve benefit, I leave that in your court to try and fathom out (unless you get really stuck)


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> Oh, and what's with the aerial photo. Don't tell me you fly as well as being a whizz with the old coding, and having Zebra as pets


Ha-ha - I wish! A friend needed flying hours, so I paid for a flight round the farm


----------



## howard.a.s (Jul 22, 2005)

Thanks Jim. No, really, thanks very much indeed! There's plenty here to be going on with for a while, not to mention the altered image slider, and the diagonal images code that we have talked about in other recent posts. I'll tinker with all of these and let you know how I get on. Best, Howard.


----------



## JiminSA (Dec 15, 2011)

Super Cool Howard
Take your time and learn as much as you can through trial and error - I find it the most effective way to steepen my learning curve ...


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> the page will now be called index.php instead of index.html?


I forgot to answer this question - yes it will now be a .php file, which will be automatically picked up by the browser, if the .html file is deleted ...


----------

