1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Bootstrap Carousel Image Swap

Discussion in 'Web Design & Development' started by howard.a.s, Oct 8, 2018.

Advertisement
  1. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    476
    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

    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?
     
  2. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,220
    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;)
     
  3. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,220
    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(080);
    ?>
    <!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>
     
  4. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,220
    You will never overask as far as I'm concerned - your queries are always interesting and sometimes a bit of a challenge;)
     
  5. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    476
    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: Oct 9, 2018
  6. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    476
    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
     
  7. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,220
    Absolutely!
    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.
    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/
    No Howard, that styling can be dropped in favour of your own.
    Nope you may drop that;)
    That's correct (lucky me:))
     
  8. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    476
    Yes, lucky you :) Did you catch my final note about the overlays?
     
  9. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    476
    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 :)
     
  10. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,220
    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: Oct 9, 2018
  11. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,220
    Ha-ha - I wish! A friend needed flying hours, so I paid for a flight round the farm:eek:
     
  12. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    476
    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.
     
  13. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,220
    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 ...
     
  14. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,220
    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 ...
     
  15. Sponsor

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 733,556 other people just like you!

Loading...

Short URL to this thread: https://techguy.org/1217525

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice