Search code examples
phphtmlmysqlcarousel

How to display 2 images per slide in carousel using php while loop?


I have a problem with displaying images in carousel. I want to display 2 images per carousel slide. I took images from database using while loop to create slides. The problem is that with my code it only displays one image per slide.

This is how it looks now: Check the image

<?php
                $brojacPoStrani = 0;
                $sqlIzvestaji = mysqli_query($con, "SELECT operacije.nazivEng, izvestaji.operacija, izvestaji.ucinak, izvestaji.id FROM izvestaji INNER JOIN operacije ON izvestaji.operacijaId=operacije.id WHERE projekatId='$projekatId' AND datum='$datum'");
                while ($row = mysqli_fetch_array($sqlIzvestaji)) {
                    $id = $row['id'];

                    $sqlSlike = mysqli_query($con, "SELECT img_name FROM slike WHERE izvestajId='$id' AND datum='$datum'");

                    $brojacDuplikata = false;
                    while ($row2 = mysqli_fetch_array($sqlSlike)) {
                        if ($brojacPoStrani % 2 == 0) {
                ?>
                            <div class="carousel-cell" style="background-image: url('img/izvestaji.jpg'); background-repeat: no-repeat; background-size: 100% 350px;">
                                <h1 style="color: #fff; text-align: left; padding-left: 15px; font-weight: bold;"><?php echo $row['nazivEng']; ?></h1>
                                <?php
                                if ($brojacDuplikata === false) {
                                    $brojacDuplikata = true;
                                ?>
                                    <p style="text-align: left; padding-left: 45px; padding-top: 20px; padding-bottom: 10px;"><?php echo $row['operacija'] . " - " . $row['ucinak']; ?></p>
                                <?php
                                } else {
                                ?>
                                    <p style="text-align: left; padding-left: 45px; padding-top: 40px; padding-bottom: 10px;"></p>
                                <?php
                                }
                                ?>
                                <div class="row">
                                    <?php
                                    if ($brojacPoStrani % 2 == 0) {
                                    ?>
                                        <div class="col-lg-6">
                                            <img src="../files/izvestaji/<?php echo $project; ?>/<?php echo $datum; ?>/<?php echo $row['nazivEng']; ?>/<?php echo $row2['img_name']; ?>" style="width: 350px; height: 350px; padding-left: 10px;" class="float-right" />
                                        </div>
                                    <?php
                                    } else {
                                    ?>
                                        <div class="col-lg-6">
                                            <img src="../files/izvestaji/<?php echo $project; ?>/<?php echo $datum; ?>/<?php echo $row['nazivEng']; ?>/<?php echo $row2['img_name']; ?>" style="width: 350px; height: 350px; padding-right: 10px;" class="float-left" />
                                        </div>
                                    <?php
                                    }
                                    ?>

                                </div>
                                <br />
                            </div>
                <?php
                        }
                        $brojacPoStrani++;
                    }
                    $brojacPoStrani = 0;
                }

Solution

  • As mentioned it looks like you should be able to use a single query rather than having nested queries - and to display 2 images per carousel slide you effectively want to select data from the current and next rows. One easy way to do that would be to assign the entire recordset to a variable and then process that array using a for loop. The following is a simplified, semi-pseudo code version that attempts to combine the sql queries and assign recordset to an array. It is not tested as such but it might? be of use.

    $sql="select 
            o.naziveng, 
            i.operacija, 
            i.ucinak, 
            i.id,
            s.img_name
        from izvestaji i
            inner join operacije o on i.operacijaid=o.id
            inner join slike s on s.izvestajId=i.id
        where projekatid='$projekatid' and datum='$datum'";
    
    $res = mysqli_query( $con, $sql );
    if( $res ){
        $arr = mysqli_fetch_all( $res, MYSQLI_BOTH );
    
        for( $i=0; $i < count( $arr ); $i+=2 ){
            try{
    
                $r1=array_key_exists( $i+0, $arr ) ? $arr[ $i+0 ] : false;
                $r2=array_key_exists( $i+1, $arr ) ? $arr[ $i+1 ] : false;
    
                /*
                    generate the HTML structure and add two images
                */
                echo '<div class="carousel-cell">'; # simplified version
                if( $r1 )echo 'row 1: '.$r1['img_name'];
                if( $r2 )echo 'row 2: '.$r2['img_name'];
                echo '</div>';
    
            }catch( Exception $e ){
                continue;
            }
        }
    }