Scribd
Upload
8 views

dynamic_slider

The document outlines the creation of a MySQL database named 'slider_db' with a table for images, including fields for image URLs and captions. It also provides a PHP configuration file to connect to the database and an HTML/PHP script to display a dynamic image slider with navigation buttons. The slider fetches images from the database and allows users to navigate through them using JavaScript functionality.

Uploaded by

pranshavji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views

dynamic_slider

The document outlines the creation of a MySQL database named 'slider_db' with a table for images, including fields for image URLs and captions. It also provides a PHP configuration file to connect to the database and an HTML/PHP script to display a dynamic image slider with navigation buttons. The slider fetches images from the database and allows users to navigate through them using JavaScript functionality.

Uploaded by

pranshavji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

My SQL php my admin

CREATE DATABASE slider_db;

USE slider_db;

CREATE TABLE images (


id INT AUTO_INCREMENT PRIMARY KEY,
image_url VARCHAR(255) NOT NULL,
caption VARCHAR(255) NOT NULL
);

INSERT INTO images (image_url, caption) VALUES


('image1.jpg', 'First Slide'),
('image2.jpg', 'Second Slide'),
('image3.jpg', 'Third Slide');
-----------------------------------------------------
config.php
<?php
$host = "localhost";
$user = "root";
$password = "";
$database = "slider_db";

$conn = new mysqli($host, $user, $password, $database);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
-----------------------------------------------------
index.php
<?php
include 'config.php';

$sql = "SELECT * FROM images";


$result = $conn->query($sql);
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Slider</title>
<style>
body { text-align: center; }
.slider-container {
width: 60%;
margin: auto;
overflow: hidden;
position: relative;
}
.slider {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
box-sizing: border-box;
}
img {
width: 100%;
height: auto;
}
.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
#prev { left: 0; }
#next { right: 0; }
</style>
</head>
<body>

<h2>Dynamic Image Slider</h2>

<div class="slider-container">
<div class="slider" id="slider">
<?php while ($row = $result->fetch_assoc()) { ?>
<div class="slide">
<img src="<?php echo $row['image_url']; ?>" alt="<?php echo
$row['caption']; ?>">
<p><?php echo $row['caption']; ?></p>
</div>
<?php } ?>
</div>
<button class="nav-btn" id="prev">❮</button>
<button class="nav-btn" id="next">❯</button>
</div>

<script>
let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
const slider = document.getElementById('slider');

document.getElementById('next').addEventListener('click', () => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
slider.style.transform = `translateX(-${currentIndex * 100}%)`;
});

document.getElementById('prev').addEventListener('click', () => {
if (currentIndex > 0) {
currentIndex--;
} else {
currentIndex = totalSlides - 1;
}
slider.style.transform = `translateX(-${currentIndex * 100}%)`;
});
</script>

</body>
</html>

You might also like