website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

dynamic-boostrap-slider-in-php

Dynamic Boostrap Slider in PHP

  • 161
  • 06-Jan-2022
  • Details

    index.php
     <?php
        $conn = mysqli_connect("localhost", "root", "", "dynamic_slider");
        ?>
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Dynamic Slider</title>
            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
            <!-- jQuery library -->
            <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
            <!-- Popper JS -->
            <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
            <!-- Latest compiled JavaScript -->
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
        </head>
        <style>
            .carousel-indicators>li {
                width: 10px;
                height: 10px;
            }
            .carousel-control-prev-icon {
                background: url('./image/prev.png') no-repeat;
                background-size: cover;
                border-radius: 50%;
                border: 8px solid #202020;
                width: 30px;
                height: 30px;
            }
    
            .carousel-control-next-icon{
                background: url('./image/prev.png') no-repeat;
                background-size: cover;
                transform: rotate(180deg);
                border-radius: 50%;
                border: 8px solid #202020;
                width: 30px;
                height: 30px;  
            }
        </style>
        <body style="background: black;">
            <?php
            $sel = "select * from image";
            $res = mysqli_query($conn, $sel);
            $li = '';
            $i = 0;
            $div = '';
            while ($row = mysqli_fetch_assoc($res)) {
                $image = $row['image'];
                if ($i == 0) {
                    $li .= ' <li data-target="#demo" data-slide-to="' . $i . '" class="active"></li>';
                    $div .= ' <div class="carousel-item active ">
            <img src="image/' . $image . '" alt="Los Angeles" class="w-100">';
                } else {
                    $li .= ' <li data-target="#demo" data-slide-to="' . $i . '"></li>';
                    $div .= ' <div class="carousel-item">
            <img src="image/' . $image . '" alt="Los Angeles" class="w-100">';
                }
                $i++;
                $div .= '</div>';
            }
            ?>
            <!-- <div id="demo" class="carousel slide" data-ride="carousel"> -->
            <div id="demo" class="carousel slide carousel-fade" data-ride="carousel" data-interval="2000">
                <!-- Indicators -->
                <ul class="carousel-indicators carousel-fade">
                    <?= $li ?>
                </ul>
                <!-- The slideshow -->
                <div class="carousel-inner">
                    <?= $div ?>
                </div>
                <!-- Left and right controls -->
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
            </div>
        </body>
        </html>

     

    dynamic_slider.sql
    DROP TABLE IF EXISTS `image`;
    CREATE TABLE IF NOT EXISTS `image` (
      `ID` int NOT NULL AUTO_INCREMENT,
      `image` varchar(255) COLLATE ascii_bin NOT NULL,
      PRIMARY KEY (`ID`)
    ) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=ascii COLLATE=ascii_bin;
    --
    -- Dumping data for table `image`
    --
    INSERT INTO `image` (`ID`, `image`) VALUES
    (1, '1.png'),
    (2, '2.png'),
    (3, '3.png'),
    (4, '4.png');
    COMMIT;

     

whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat