How to make carousel work properly with php

Question

enter image description here Here is the output I have tried this code but the carousel is not working properly...The first image is shown properly but the second one is shown below the first one and not in slides....Here is my code..

<div class="banner">
<?php
mysqli_set_charset($conn, 'utf8');
$query=mysqli_query($conn,"select * from post_tbl where status='Approved' Order by pid DESC");
while($row=mysqli_fetch_array($query))
{
?>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <div class="carousel-caption">
                    <h3><?php echo $row['title']; ?>
                    </h3>
                    <div class="read">
                        <a href="single.html" class="btn btn-primary read-m">Read More</a>
                    </div>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
<?php } ?>
</div>

I'm not all that familiar with carousel, but I'm wondering if you need to move the loop inside of the divs somewhere, so it's only repeating the items and not the whole slider divs. — aynber, Jul 22 '19 at 15:57
I even tried that also...I moved the loop to another div's but same problem — Debraz G, Jul 22 '19 at 15:58

Diogo Santo · Accepted Answer · 2019-07-22T17:04:56.397

0

You will need 2 loops. One to know how many rows you are going to draw. This will be used to build your ol DOM.

The second to loop your actual div content where your select contains the necessary information.

 <div class="banner">
    <?php
    mysqli_set_charset($conn, 'utf8');
    $query = mysqli_query($conn, "select * from post_tbl where status='Approved' Order by pid DESC");
    ?>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <?php for ($numElements = 0; $numElements < mysqli_num_rows($query); $numElements++) : ?>
            <li data-target="#carouselExampleIndicators"
                data-slide-to="<?php echo $numElements ?>" <?php echo($numElements == 0 ? 'class="active"' : '') ?> ></li>
        <?php endfor; ?>

        <div class="carousel-inner" role="listbox">
            <?php $rows = mysqli_fetch_array($query); ?>
            <?php foreach ($rows as $row) : ?>
                <div class="carousel-item <?php echo($row == reset($rows) ? 'active' : '') ?>">
                    <div class="carousel-caption">
                        <h3><?php echo $row['title']; ?>
                        </h3>
                        <div class="read">
                            <a href="single.html" class="btn btn-primary read-m">Read More</a>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

This should set your DOM correctly.

If you are already familiar with OOP concepts this gets way more organised and protected and would highly advice to follow that route instead.

Also there are plenty of threads around warning about sql injection so, if you are thinking on having a variable to dynamically adjust your query, please look into those first

As an introduction I can leave you with this thread

edited Jul 22 '19 at 17:04

answered Jul 22 '19 at 16:25

Diogo Santo

769
6
12

it gives me this error - Parse error: syntax error, unexpected 'class' (T_CLASS) in
tag

Debraz G

Jul 22 '19 at 16:52

And with reason. Needed to wrap `class` around `\``. Edited the code to fix that – Diogo Santo Jul 22 '19 at 16:53

Now, the slides disappeared...the whole

disappeared

– Debraz G Jul 22 '19 at 16:57

If you inspect the element, until when does it process? Also, have you closed the last div? I only added the changes for internal div but didnt close the outside div that wraps it all up which means you still need to add the `` elements and the last `

`

– Diogo Santo Jul 22 '19 at 17:00

can u please do the whole php thing...I am not getting anythin...please help me.. – Debraz G Jul 22 '19 at 17:02

@DebrazG let me encapsulate your entire code then and then try and copy it all – Diogo Santo Jul 22 '19 at 17:03

@DebrazG added the entirety of your banner with the changes – Diogo Santo Jul 22 '19 at 17:05

@DebrazG we need to carry this dicussion on a room. Do you mind accessing [this room](https://chat.stackoverflow.com/rooms/196821/answer-debate)? – Diogo Santo Jul 22 '19 at 17:14

ufff, right, from what I can see from your picture your are looping outside the answer as well. The very fact your got the `` tags repeated 4 times assert that. Remove whatever code you have and leave it only to the answer and the DB connection and try it out. I don't see any logic in my answer that would actually trigger what you just showed me – Diogo Santo Jul 22 '19 at 17:23

can i mail my whole script to you? – Debraz G Jul 22 '19 at 17:24

I have sent that whole page...if u want any other pages please ask me....and thanks for helping me.. – Debraz G Jul 22 '19 at 17:31

How to make carousel work properly with php

1 Answers1