Create Dynamic Image Slider with PHP and MySQL

Image slider is mostly used to display banners or products on the web page. It helps to display multiple images or elements in the same section without taking up much space on the web page. The slider is a very useful component for the eCommerce website. You can use a carousel slider for multiple purposes in the web application, such as displaying featured products, offers, deals, and other important content.

Generally, static images or text contents are used in the slider. But you need to edit and modify the file each time you wish to change or add new images in the slider. To overcome this issue, you can display the images dynamically in the slider. With the dynamic process, the images will be fetched from the database and displayed in the slider. You can change or add images easily from the database without editing the file manually.

In this tutorial, we will show you how to create dynamic image slider with jQuery using PHP and MySQL. The dynamic slider can be used to display images from the database with PHP and MySQL. You can use a dynamic slider to integrate the product slider in PHP with the database. There are various jQuery plugins are available to add slider feature to the webpage. We will use slick carousel slider plugin to create dynamic image slider with PHP and MySQL.

Before getting started to make dynamic product slider with PHP, take a look at the file structure.

dynamic_image_slider_with_php/
├── dbConfig.php
├── index.php
├── slick/
│   ├── slick.css
│   └── slick.min.js
├── images/
├── js/
│   └── jquery.min.js
└── css/
    └── style.css

Create Database Table

To store image file information a table needs to be created in the database. The following SQL creates an images table with some basic fields in the MySQL database.

CREATE TABLE `images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `created` datetime NOT NULL DEFAULT current_timestamp(),
  `modifed` datetime NOT NULL DEFAULT current_timestamp(),
  `status` tinyint(1) NOT NULL DEFAULT 1 COMMENT '1=Active | 0=Inactive',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Now, you need to insert some data in the images table in the database which will be fetched from the database later in the script.

INSERT INTO `images` (`id`, `file_name`, `title`, `created`, `modifed`, `status`) VALUES
(1, 'car-img-1.jpg', 'Demo Product 1', '2023-01-12 16:19:36', '2023-01-12 16:19:36', 1),
(2, 'car-img-2.jpg', 'Demo Product 2', '2023-01-12 16:19:53', '2023-01-12 16:19:53', 1),
(3, 'car-img-3.jpg', 'Demo Product 3', '2023-01-12 16:20:03', '2023-01-12 16:20:03', 1),
(4, 'car-img-4.jpg', 'Demo Product 4', '2023-01-12 16:20:11', '2023-01-12 16:20:11', 1),
(5, 'car-img-5.jpg', 'Demo Product 5', '2023-01-12 16:20:22', '2023-01-12 16:20:22', 1);

Note that: The respective image files must be placed in the images/ folder.

Create Directory to Store Images

A directory is required in the server to store the physical files. Create a folder named images/ to store the image files.

Database Configuration (dbConfig.php)

The dbConfig.php file is used to connect and select the database. Specify the database host ($dbHost), username ($dbUsername), password ($dbPassword), and name ($dbName) as per your MySQL database credentials.

<?php  
 
// Database configuration  
$dbHost     = "localhost";  
$dbUsername = "root";  
$dbPassword = "root";  
$dbName     = "codexworld_db";  
  
// Create database connection  
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);  
  
// Check connection  
if ($db->connect_error) {  
    die("Connection failed: " . $db->connect_error);  
} 
 
?>

Dynamic Image Slider (index.php)

The images and text contents are fetched from the database and added to the slick slider.

jQuery Library:
The slick.js library has a dependency on jQuery, include the jQuery library file first.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

Slick Carousel Plugin:
The jQuery slick plugin is used to add slider feature in HTML, so, include the CSS and JS library files of the slick slider.

<!-- slick slider CSS library files -->
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

<!-- slick slider JS library file -->
<script type="text/javascript" src="slick/slick.min.js"></script>

Use the slick() method to initialize the slider and attach it to the HTML element.

• Specify the parent div class (.product-slider) as a selector to bind the slick slider.
• You can use some setting options to configure the slider as per the application requirement.

<script>
$(document).ready(function(){
    $('.product-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: false,
        infinite: true,
        arrows: true
    });
});
</script>

Slider Element with Dynamic Images:
The image and title are fetched from the database and listed to define slider markup.

• The data are retrieved from the database dynamically using PHP and MySQL.
• All the images and titles should be listed under the parent div (.product-slider) whose class is specified as a selector in the slick() method.

<div class="product-slider">
    <?php 
    // Include database configuration file 
    require 'dbConfig.php'; 
     
    // Retrieve images from the database 
    $query = $db->query("SELECT * FROM images WHERE status = 1"); 
     
    if($query->num_rows > 0){ 
        while($row = $query->fetch_assoc()){ 
            $imageURL = 'images/'.$row["file_name"]; 
    ?>
        <div class="slide">
            <img src="<?php echo $imageURL; ?>" alt="" />
            <h6><?php echo $row["title"]; ?></h6>
        </div>
    <?php } 
    } ?>
</div>

Testing

Now, if you open the index.php file on the browser, you’ll see a fully functional dynamic slider with the product image and title on the web page.

Create Dynamic Image Gallery with Database PHP & MySQL

Conclusion

With this example script, we have tried to provide a step-by-step process to create dynamic slider in PHP with MySQL. You can use this dynamic responsive image slider component to build product slider in online shopping or eCommerce website. Here the slick plugin is used for the slider feature that can be configured or customized as per your needs.