Image slider<\/b> 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.<\/p>\n
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.<\/p>\n
In this tutorial, we will show you how to create dynamic image slider<\/b> 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<\/b> plugin to create dynamic image slider with PHP and MySQL.<\/p>\n
Before getting started to make dynamic product slider with PHP<\/b>, take a look at the file structure.<\/p>\n To store image file information a table needs to be created in the database. The following SQL creates an Now, you need to insert some data in the Note that:<\/span> The respective image files must be placed in the images\/ folder.<\/p>\n A directory is required in the server to store the physical files. Create a folder named The The images and text contents are fetched from the database and added to the slick slider.<\/p>\n jQuery Library:<\/b> Slick Carousel Plugin:<\/b> Use the slick()<\/b> method to initialize the slider and attach it to the HTML element.<\/p>\n Slider Element with Dynamic Images:<\/b>dynamic_image_slider_with_php\/<\/span>\r\n\u251c\u2500\u2500 dbConfig.php\r\n\u251c\u2500\u2500 index.php\r\n\u251c\u2500\u2500 slick\/<\/span>\r\n\u2502 \u251c\u2500\u2500 slick.css\r\n\u2502 \u2514\u2500\u2500 slick.min.js\r\n\u251c\u2500\u2500 images\/<\/span>\r\n\u251c\u2500\u2500 js\/<\/span>\r\n\u2502 \u2514\u2500\u2500 jquery.min.js\r\n\u2514\u2500\u2500 css\/<\/span>\r\n \u2514\u2500\u2500 style.css\r\n<\/pre>\nCreate Database Table<\/h2>\n
images<\/code> table with some basic fields in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `images`<\/span> (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `file_name`<\/span> varchar<\/span>(255<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `title`<\/span> varchar<\/span>(255<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `created`<\/span> datetime NOT<\/span> NULL<\/span> DEFAULT<\/span> current_timestamp<\/span>(),\r\n `modifed`<\/span> datetime NOT<\/span> NULL<\/span> DEFAULT<\/span> current_timestamp<\/span>(),\r\n `status`<\/span> tinyint(1<\/span>) NOT<\/span> NULL<\/span> DEFAULT<\/span> 1<\/span> COMMENT<\/span> '1=Active | 0=Inactive'<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nimages<\/code> table in the database which will be fetched from the database later in the script.<\/p>\nINSERT<\/span> INTO<\/span> `images`<\/span> (`id`<\/span>, `file_name`<\/span>, `title`<\/span>, `created`<\/span>, `modifed`<\/span>, `status`<\/span>) VALUES<\/span>\r\n(1<\/span>, 'car-img-1.jpg'<\/span>, 'Demo Product 1'<\/span>, '2023-01-12 16:19:36'<\/span>, '2023-01-12 16:19:36'<\/span>, 1<\/span>),\r\n(2<\/span>, 'car-img-2.jpg'<\/span>, 'Demo Product 2'<\/span>, '2023-01-12 16:19:53'<\/span>, '2023-01-12 16:19:53'<\/span>, 1<\/span>),\r\n(3<\/span>, 'car-img-3.jpg'<\/span>, 'Demo Product 3'<\/span>, '2023-01-12 16:20:03'<\/span>, '2023-01-12 16:20:03'<\/span>, 1<\/span>),\r\n(4<\/span>, 'car-img-4.jpg'<\/span>, 'Demo Product 4'<\/span>, '2023-01-12 16:20:11'<\/span>, '2023-01-12 16:20:11'<\/span>, 1<\/span>),\r\n(5<\/span>, 'car-img-5.jpg'<\/span>, 'Demo Product 5'<\/span>, '2023-01-12 16:20:22'<\/span>, '2023-01-12 16:20:22'<\/span>, 1<\/span>);<\/pre>\nCreate Directory to Store Images<\/h2>\n
images\/<\/code> to store the image files.<\/p>\nDatabase Configuration (dbConfig.php)<\/h2>\n
dbConfig.php<\/code> file is used to connect and select the database. Specify the database host ($dbHost<\/code>), username ($dbUsername<\/code>), password ($dbPassword<\/code>), and name ($dbName<\/code>) as per your MySQL database credentials.<\/p>\n<?php
<\/span>\/\/ Database configuration
<\/span>$dbHost <\/span>= <\/span>\"localhost\"<\/span>;
<\/span>$dbUsername <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbPassword <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbName <\/span>= <\/span>\"codexworld_db\"<\/span>;
<\/span>\/\/ Create database connection
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
<\/span>\/\/ Check connection
<\/span>if (<\/span>$db<\/span>-><\/span>connect_error<\/span>) {
die(<\/span>\"Connection failed: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
}
<\/span>?><\/span><\/pre>\nDynamic Image Slider (index.php)<\/h2>\n
\nThe slick.js<\/code> library has a dependency on jQuery, include the jQuery library file first.<\/p>\n<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.3\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\n
\nThe jQuery slick plugin is used to add slider feature in HTML, so, include the CSS and JS library files of the slick slider.<\/p>\n<!-- slick slider CSS library files --><\/span>\r\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> type<\/span>=\"text\/css\"<\/span> href<\/span>=\"slick\/slick.css\"<\/span>\/><\/span>\r\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> type<\/span>=\"text\/css\"<\/span> href<\/span>=\"slick\/slick-theme.css\"<\/span>\/><\/span>\r\n\r\n<!-- slick slider JS library file --><\/span>\r\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"slick\/slick.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\n\n
.product-slider<\/code>) as a selector to bind the slick slider.<\/li>\n<script<\/span>><\/span>\r\n$(document<\/span>).ready(function<\/span>(<\/span>)<\/span>{\r\n $('.product-slider'<\/span>).slick({\r\n slidesToShow: 1<\/span>,\r\n slidesToScroll: 1<\/span>,\r\n dots: false<\/span>,\r\n infinite: true<\/span>,\r\n arrows: true<\/span>\r\n });\r\n});<\/span>\r\n<\/script<\/span>><\/span><\/pre>\n
\nThe image and title are fetched from the database and listed to define slider markup.<\/p>\n\n
.product-slider<\/code>) whose class is specified as a selector in the slick()<\/code> method.<\/li>\n<\/ul>\n<div<\/span> class<\/span>=\"product-slider\"<\/span>><\/span>\r\n <?php
<\/span>\/\/ Include database configuration file
<\/span>require <\/span>'dbConfig.php'<\/span>;
<\/span>\/\/ Retrieve images from the database
<\/span>$query <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT * FROM images WHERE status = 1\"<\/span>);
if(<\/span>$query<\/span>-><\/span>num_rows <\/span>> <\/span>0<\/span>){
while(<\/span>$row <\/span>= <\/span>$query<\/span>-><\/span>fetch_assoc<\/span>()){