How To Create Dynamic And Responsive Image Slider In PHP
In this tutorial i will teach You How To Create Dynamic And Responsive Image Slider In PHP.We are using MySQL as back-end.For this we are using FlexSlider and CSS3.To start with it we have to create a table in MySQL.In this example we have one column for storing image name, you can also use slider sequence to display the slides according to sequence.
Config.php:
<?php
$hostname_conn = "localhost";
$database_conn = "mycreation";
$username_conn = "php";
$password_conn = "php";
$conn = mysql_connect($hostname_conn, $username_conn, $password_conn) or trigger_error(mysql_error(),E_USER_ERROR);
mysql_select_db($database_conn, $conn) or die("could not".mysql_error());
?>
PHP Code:
<?php
// Included configuration file in our code.
include("config.php");
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How To Create A Responsive Image Slider</title>
<link href="StyleSheet.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script>
$(document).ready(function () {
$('.flexslider').flexslider({
animation: 'fade',
controlsContainer: '.flexslider'
});
});
</script>
</head>
<body>
<div class="container">
<h2>How To Create A Responsive Image Slider</h2>
<div class="flexslider">
<ul class="slides">
<?php
// Creating query to fetch state information from mysql database table.
$state_query = "select * from slides";
$state_result = mysql_query($state_query);
while($r = mysql_fetch_array($state_result)){ ?>
<li>
<img src="image/<?php echo $r['image_name'];?>" />
</li>
<?php } ?>
</ul>
</div>
<!--footer-->
<div class="footer">
<p>© 2013 All rights reserved by HighTechnology.in
<a href="http://hightechnology.in" target="_blank">HighTechnology.in</a>
| Hosting Partner <a href="http://www.grootstech.com" target="_blank">Grootstech Solutions</a></p>
</div>
</div>
</body>
</html>
StyleSheet:
body {
margin:0px auto;
font-family:Candara;
font-size:14px;
width:100%;
}
.h2
{
text-align:center;
}
.footer
{
width: 100%;
text-align: center;
padding-top: 40px;
font-size: 16px;
}
.container{
width:80%;
min-width: 150px;
max-width: 960px;
margin:0px auto;
text-align:center;
}
.container a:active,
.flexslider a:active,
.container a:focus,
.flexslider a:focus { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flexslider a img { outline: none; border: none; }
.flexslider {
margin: 0;
padding: 0;
position: relative;
zoom: 1;
padding: 10px;
background: #ffffff;
}
.flexslider .slides > li {
display: none;
backface-visibility:hidden;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
display: block;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }
.flexslider .slides { zoom: 1; }
.flex-direction-nav a {
display: block;
position: absolute;
margin: -17px 0 0 0;
width: 35px;
height: 35px;
top: 50%;
cursor: pointer;
text-indent: -9999px;
background-color: #ff6a00;
}
.flex-direction-nav a:before {
display: block;
position: absolute;
content: '';
width: 9px;
height: 13px;
top: 11px;
left: 11px;
background: url(image/arrows.png) no-repeat;
}
.flex-direction-nav a:after {
display: block;
position: absolute;
content: '';
width: 0;
height: 0;
top: 35px;
}
.flex-direction-nav .flex-next {
right: -5px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.flex-direction-nav .flex-prev {
left: -5px;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.flex-direction-nav .flex-next:before { background-position: -9px 0; left: 15px; }
.flex-direction-nav .flex-prev:before { background-position: 0 0; }
.flex-direction-nav .flex-next:after {
left: 20px;
border-bottom: 5px solid transparent;
border-left: 12px solid #ff6a00;
}
.flex-direction-nav .flex-prev:after {
left: 0;
border-bottom: 5px solid transparent;
border-right: 16px solid #ff6a00;
}
.flexslider .flex-control-nav {
position: absolute;
width: 100%;
bottom: -40px;
text-align: center;
margin: 0 0 0 -10px;
}
.flex-control-nav li {
display: inline-block;
zoom: 1;
}
.flex-control-paging li a {
display: block;
cursor: pointer;
text-indent: -9999px;
width: 12px;
height: 12px;
margin: 0 3px;
background-color: #b6b6b6 \9;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: inset 0 0 0 2px #b6b6b6;
-moz-box-shadow: inset 0 0 0 2px #b6b6b6;
box-shadow: inset 0 0 0 2px #b6b6b6;
}
.flex-control-paging li a.flex-active {
background-color: #ff6a00;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
3 replies on “How To Create Dynamic And Responsive Image Slider In PHP”
I just want to say I’m beginner to weblog and certainly enjoyed this web page. Most likely I’m likely to bookmark your blog . You really come with impressive posts. Appreciate it for revealing your blog.
I just want to say I am very new to blogging and site-building and definitely enjoyed this blog. Probably I’m planning to bookmark your blog . You really come with exceptional stories. Thanks for sharing your web page.
I’m extremely impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you customize it yourself? Either way keep up the excellent quality writing, it’s rare to see a nice blog
like this one nowadays.