Bootstrap Carousel Image Swap

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

howard.a.s

Thread Starter
Joined
Jul 22, 2005
Messages
502
Joined
Dec 15, 2011
Messages
3,397
First Name
Jim
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;)
 
Joined
Dec 15, 2011
Messages
3,397
First Name
Jim
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(y)
Live example
The code:
PHP:
<?php
    session_start();
    $first = true;
    $slide_array = array();
    $slide_array = array_fill(0, 8, 0);
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Basic HTML File</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Fontawsome -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

    <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>
    <script>
    $(document).ready(function(){
         $("#myCarousel").carousel();
    });
    </script>
    <script>
    function myFunction() {
        location.reload();
    }
    </script>
</head>
<body>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
        <!-- Wrapper for carousel items -->
        <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 controls -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
    <h1><a href="javascript:void(0);" onclick="myFunction()" title="Click/Tap to Refresh Page"><i class="fas fa-redo-alt"></i> Refresh the page to show different pictures ...</a></h1>
</body>
</html>
 
Joined
Dec 15, 2011
Messages
3,397
First Name
Jim
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

Thread Starter
Joined
Jul 22, 2005
Messages
502
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
Code:
$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
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?

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"
<?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

Code:
    <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

Code:
<?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

Code:
  <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!
 
Last edited:

howard.a.s

Thread Starter
Joined
Jul 22, 2005
Messages
502
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 o_O
 
Joined
Dec 15, 2011
Messages
3,397
First Name
Jim
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!
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.
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/
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.
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;)
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

Thread Starter
Joined
Jul 22, 2005
Messages
502
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 :)
 
Joined
Dec 15, 2011
Messages
3,397
First Name
Jim
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 o_O
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:
PHP:
$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;))
 
Last edited:
Joined
Dec 15, 2011
Messages
3,397
First Name
Jim
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:eek:
 

howard.a.s

Thread Starter
Joined
Jul 22, 2005
Messages
502
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.
 
Joined
Dec 15, 2011
Messages
3,397
First Name
Jim
Super Cool Howard:cool:
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 ...
 
Joined
Dec 15, 2011
Messages
3,397
First Name
Jim
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 ...
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Top