'using bootstarp4 carousel slid show all data appears, how to enable each item individually appears

data from database is fetched all but in slider it shows all three selected items. three rows are select with correct content from database but it appears as mixed up all three item over each other as well the next and previous button is also not working.

<div id="mycarousel" class="carousel slide" data-bs-ride="carousel">
        <ol class="carousel-indicators">
            <li data-bs-target="#mycarousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#mycarousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#mycarousel" data-bs-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <?php
            $show_slider=show_slider();
            $rows=$show_slider->fetchAll(PDO::FETCH_ASSOC);
            foreach ($rows as $row){?>
                <div class="carousel-item active">
                    <div class="container">
                        <div class="row p-5">
                            <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                                <img class="img-fluid" src="img/upload_img/product_pic/<?php echo $row['p_picture']?>" alt="<?php echo $row['p_brand']?>">
                            </div>
                            <div class="col-lg-6 mb-0 d-flex align-items-center">
                                <div class="text-align-left align-self-center">
                                    <h1 class="h1 text-success"><b><?php echo $row['p_brand']?></b></h1>
                                    <h3 class="h2"> <?php echo $row['p_about']?></h3>
                                    <p>
                                        <?php echo $row['p_remark']?>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php
            }
            ?>
    
        </div>
        <a class="carousel-control-prev text-decoration-none w-auto ps-3" href="#carousel" role="button" data-bs-slide="prev">
            <i class="fas fa-chevron-left"></i>
        </a>
        <a class="carousel-control-next text-decoration-none w-auto pe-3" href="#carousel" role="button" data-bs-slide="next">
            <i class="fas fa-chevron-right"></i>
        </a>
    
    </div>
    <script>
        $(".carousel .item").first().addClass("active");
    </script>
slideshowbootstrap-carousel


Solution 1:[1]

Here is below code fixed my issue:

<div id="Scarousel" class="carousel slide" data-ride="carousel">
    <?php
    $show_slider=show_slider();
    $rows=$show_slider->fetchAll(PDO::FETCH_ASSOC);
    ?>
    <ol class="carousel-indicators">
        <?php
        $i=0;

        foreach ($rows as $value){
            if ($i==0){
                echo '<li data-bs-target="#Scarousel" data-slide-to="0" class="active"></li>';
                $i++;
            }
            else{
                echo '<li data-bs-target="#Scarousel" data-slide-to="0"></li>';
                $i++;
            }
        }
        ?>
    </ol>
    <div class="carousel-inner">
        <?php
        $s=0;
        foreach ($rows as $value){
            if ($s==0){
             echo  '
            <div class="carousel-item active">
            <div class="container">
                <div class="row p-5">
                    <div">
                        <img class="img-fluid" src="./img/upload_img/product_pic/'. $value["p_picture"].'" alt="'.$value["p_picture"].'">
                    </div>
                    <div class="text-align-left align-self-center">
                            <h1 class="h1 text-success"><b>'.$value["p_brand"].'</b></h1>
                            <h3 class="h2">'.$value["p_about"].'</h3>
                            <p>'.$value["p_remark"].'</p>
                    </div>
                </div>
            </div>
        </div>
                ';
             $s++;
            }
            else{
                echo  '
            <div class="carousel-item">
            <div class="container">
                <div class="row p-5">
                    <div>
                        <img class="img-fluid" src="./img/upload_img/product_pic/'. $value["p_picture"].'" alt="'.$value["p_picture"].'">
                    </div>
                    <div class="text-align-left align-self-center">
                            <h1 class="h1 text-success"><b>'.$value["p_brand"].'</b></h1>
                            <h3 class="h2">'.$value["p_about"].'</h3>
                            <p>'.$value["p_remark"].'</p>
                    </div>
                </div>
            </div>
        </div>
                ';
                $s++;
            }
        }
        ?>
    </div>
    <a class="carousel-control-prev text-decoration-none w-auto ps-3" href="#Scarousel" role="button" data-slide="prev">
        <i class="fas fa-chevron-left"></i>
    </a>
    <a class="carousel-control-next text-decoration-none w-auto pe-3" href="#Scarousel" role="button" data-slide="next">
        <i class="fas fa-chevron-right"></i>
    </a>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sadat

Related Questions