How To Create A Responsive Image Slider

In this tutorial i will teach you How To Create A Responsive Image Slider.My Previous post was about How To Create Responsive Menu.Here we are using Flexslider.

HTML:

01<!DOCTYPE html>
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<title>How To Create A Responsive Image Slider</title>
05<link href="StyleSheet.css" rel="stylesheet" />
06<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
07<script src="js/jquery.flexslider-min.js"></script>
08<script>
09$(document).ready(function () {
10$('.flexslider').flexslider({
11animation: 'fade',
12controlsContainer: '.flexslider'
13});
14});
15</script>
16</head>
17<body>
18 
19<div class="container">
20<h2>How To Create A Responsive Image Slider</h2>
21<div class="flexslider">
22<ul class="slides">
23<li>
24<img src="image/1.jpg" />
25</li>
26<li>
27<img src="image/2.jpg" />
28</li>
29<li>
30<img src="image/3.jpg" />
31</li>
32<li>
33<img src="image/4.jpg" />
34</li>
35</ul>
36</div>
37 
38 
39<!--footer-->
40<div class="footer">
41<p>&copy; 2013 All rights reserved by HighTechnology.in
42<a href="http://hightechnology.in" target="_blank">HighTechnology.in</a>
43| Hosting Partner <a href="http://www.grootstech.com" target="_blank">Grootstech Solutions</a></p>
44</div>
45</div>
46</body>
47</html>

CSS:

001body {
002margin:0px auto;
003font-family:Candara;
004font-size:14px;
005width:100%;
006}
007.h2
008{
009text-align:center;
010}
011.footer
012{
013width: 100%;
014text-align: center;
015padding-top: 40px;
016font-size: 16px;
017}
018.container{
019width:80%;
020min-width: 150px;
021max-width: 960px;
022margin:0px auto;
023text-align:center;
024}
025.container a:active,
026.flexslider a:active,
027.container a:focus,
028.flexslider a:focus  { outline: none; }
029.slides,
030.flex-control-nav,
031.flex-direction-nav {
032    margin: 0;
033    padding: 0;
034    list-style: none;
035}
036.flexslider a img { outline: none; border: none; }
037.flexslider {
038    margin: 0;
039    padding: 0;
040    position: relative;
041    zoom: 1;
042    padding: 10px;
043    background: #ffffff;
044}
045.flexslider .slides > li {
046    display: none;
047    backface-visibility:hidden;
048    -webkit-backface-visibility: hidden;
049}
050.flexslider .slides img {
051    width: 100%;
052    display: block;
053   -webkit-border-radius: 2px;
054    -moz-border-radius: 2px;
055    border-radius: 2px;
056}
057.slides:after {
058    content: ".";
059    display: block;
060    clear: both;
061    visibility: hidden;
062    line-height: 0;
063    height: 0;
064}
065html[xmlns] .slides { display: block; }
066* html .slides { height: 1%; }
067.flexslider .slides { zoom: 1; }
068.flex-direction-nav a {
069    display: block;
070    position: absolute;
071    margin: -17px 0 0 0;
072    width: 35px;
073    height: 35px;
074    top: 50%;
075    cursor: pointer;
076    text-indent: -9999px;
077    background-color: #ff6a00;
078}
079.flex-direction-nav a:before {
080    display: block;
081    position: absolute;
082    content: '';
083    width: 9px;
084    height: 13px;
085    top: 11px;
086    left: 11px;
087    background: url(../image/arrows.png) no-repeat;
088}
089.flex-direction-nav a:after {
090    display: block;
091    position: absolute;
092    content: '';
093    width: 0;
094    height: 0;
095    top: 35px;
096}
097.flex-direction-nav .flex-next {
098    right: -5px;
099    -webkit-border-radius: 3px 0 0 3px;
100    -moz-border-radius: 3px 0 0 3px;
101    border-radius: 3px 0 0 3px;
102}
103.flex-direction-nav .flex-prev {
104    left: -5px;
105    -webkit-border-radius: 0 3px 3px 0;
106    -moz-border-radius: 0 3px 3px 0;
107    border-radius: 0 3px 3px 0;
108}
109.flex-direction-nav .flex-next:before { background-position: -9px 0; left: 15px; }
110.flex-direction-nav .flex-prev:before { background-position: 0 0; }
111.flex-direction-nav .flex-next:after {
112    left: 20px;
113    border-bottom: 5px solid transparent;
114}
115.flex-direction-nav .flex-prev:after {
116    left: 0;
117    border-bottom: 5px solid transparent;
118}
119.flexslider .flex-control-nav {
120    position: absolute;
121    width: 100%;
122    bottom: -40px;
123    text-align: center;
124    margin: 0 0 0 -10px;
125}
126.flex-control-nav li {
127    display: inline-block;
128    zoom: 1;
129}
130.flex-control-paging li a {
131    display: block;
132    cursor: pointer;
133    text-indent: -9999px;
134    width: 12px;
135    height: 12px;
136    margin: 0 3px;
137    background-color: #b6b6b6 \9;
138    -webkit-border-radius: 12px;
139    -moz-border-radius: 12px;
140    border-radius: 12px;
141    -webkit-box-shadow: inset 0 0 0 2px #b6b6b6;
142    -moz-box-shadow: inset 0 0 0 2px #b6b6b6;
143    box-shadow: inset 0 0 0 2px #b6b6b6;
144}
145.flex-control-paging li a.flex-active {
146    background-color: #ff6a00;
147    -webkit-box-shadow: none;
148    -moz-box-shadow: none;
149    box-shadow: none;
150}

How To Create A Responsive Image Slider

HTML:

CSS:

One reply on “How To Create A Responsive Image Slider”