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

  • 86
  • 06-Jan-2022

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;

Download

Atechseva
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat with Me