How To Create Dynamic And Responsive Image Slider In PHP

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>&copy; 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;
}

How To Create Dynamic & Responsive Image Slider In PHP

3 thoughts on “How To Create Dynamic And Responsive Image Slider In PHP

  1. Sherell Garufi

    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.

  2. Idella Roser

    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.

  3. 80s rock

    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.

Comments are closed.