Slider

<style type="text/css">
/*
* jQuery FlexSlider v2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus{
outline:none;
}
.slides,
.flex-control-nav,
.flex-direction-nav{
margin:0;
padding:0;
list-style:none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider{
margin:0;
padding:0;
}
.flexslider .slides > li{
display:none;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img{
width:100%;
display:block;
}
.flex-pauseplay span{
text-transform:capitalize;
}
/* Clearfix for the .slides element */
.flexslider a.intro {
bottom:0;
color:rgba(0, 0, 0, 0.1);
font-size:14px;
position:absolute;
right:0;
text-decoration:none;
z-index:99999;
}
.slides:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .slides{
display:block;
}
* html .slides{
height:1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child{
display:block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider{
margin:0 0 60px;
background:#fff;
border:4px solid #fff;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
box-shadow:0 1px 4px rgba(0,0,0,.2);
zoom:1;
}
.flex-viewport{
max-height:2000px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.loading .flex-viewport{
max-height:300px;
}
.flexslider .slides{
zoom:1;
}
.carousel li{
margin-right:5px;
}
/* Direction Nav */
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
}
.flex-direction-nav a{
width:30px;
height:30px;
margin:-20px 0 0;
display:block;
background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
position:absolute;
top:50%;
cursor:pointer;
text-indent:-9999px;
opacity:0;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
}
.flex-direction-nav .flex-next{
background-position:100% 0;
right:-36px;
}
.flex-direction-nav .flex-prev{
left:-36px;
}
.flexslider:hover .flex-next{
opacity:0.8;
right:5px;
}
.flexslider:hover .flex-prev{
opacity:0.8;
left:5px;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
opacity:1;
}
.flex-direction-nav .disabled{
opacity:.3!important;
filter:alpha(opacity=30);
cursor:default;
}
/* Control Nav */
.flex-control-nav{
width:100%;
position:absolute;
bottom:-40px;
text-align:center;
}
.flex-control-nav li{
margin:0 6px;
display:inline-block;
zoom:1;
*display:inline;
}
.flex-control-paging li a{
width:11px;
height:11px;
display:block;
background:#666;
background:rgba(0,0,0,0.5);
cursor:pointer;
text-indent:-9999px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
}
.flex-control-paging li a:hover{
background:#333;
background:rgba(0,0,0,0.7);
}
.flex-control-paging li a.flex-active{
background:#000;
background:rgba(0,0,0,0.9);
cursor:default;
}
.flex-control-thumbs{
margin:5px 0 0;
position:static;
overflow:hidden;
}
.flex-control-thumbs li{
width:25%;
float:left;
margin:0;
}
.flex-control-thumbs img{
width:100%;
display:block;
opacity:.7;
cursor:pointer;
}
.flex-control-thumbs img:hover{
opacity:1;
}
.flex-control-thumbs .active{
opacity:1;
cursor:default;
}
</style>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){  
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4
  });
});
});
</script>
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrQQIqfAQxvZZ8nOJHswBncr_-AVvgLx8432ugA316ihtwaBwGZHX-5FJatifFgs_SEBUz-8RFTkKHFt_Gy6qNtSZEtI-9z_Th1aj9-L4kp-_5D-8LkOB312EsQjMyPMW65O1xw0rerkJL/s1600/ben-10-alien-force-fpplay.jpg" />
    </li>
    <li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGDYGTR3HfBirDlQlXuo-Ic6F95dC1Z0zuppnOOfJi05rmMTtsEsO2EO-77cg5ld0M8dJWUHeaW0lDIAS5IX210Vm0d7LOonhaCTuvCauwXMwE44mil3o3KBdqH-t_We54Ask4sh6DtsFw/s1600/prototype_FPPLAY.BLOG.jpg" />
    </li>
    <li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2XfrpvWvC4Ksbymb50doSLE8lT6qgfIQIbdJcNwl9FSN4V-u2ieCtIgJkR9zBKYLAPuMK4E40MR2ZZMPMa5KD_ahetmYB52WcGm08iWzbtDfoMx5_fduYJMLjLDPeJg1dLHaT8P54Clq2/s1600/Men-of-War-FPplay+(1).jpg" />
    </li>
    <li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG2LLFo3OxSMsczbF2A7Qb0n1Co3Ph7PaE7TucRxnFOhawYV2wmPrKfJysofWLdJ_LkI0wClfRJIX4BvQMv2fmHUmXyI0trAxlatRqUKRdFaFQCBmD93tkoO4n4MFgHF1N1sPSr-R1fwIu/s1600/BATMAN+ARKHAM+City-PC+Game-fpplay++%25281%2529.jpeg" />
    </li>
    <li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1xuhEy4V3bHRvI6T9RprZ2e_EDPvz15rQD60QgRl5K3ngeJ6Ahc1HE5tm4h4VTFWFcwY8MyVcsVmBzBijAy8d3L9ytkq6Fhm_hlV7_9anHQTm7keDLfnfuXbs4vv-ePFd4RorAajC1uy9/s1600/prince_of_persia_FPPLAY+%25286%2529.jpg" />
    </li>
    <li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAkyHBRhFhousjy7PPP2VfrJ32K5vAwNkAMckHH0MnIZJa1SJZ0KrF25QKFl9h0MfoeuZxYb_u23cGmdiRrVARAf0UltSOCSPyE16TmPCW4dJtudloTrVoja1D6sCCCCe8BabtQhGIA9d3/s1600/Farming-Simulator-14.jpg" />
    </li>
    <li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig8du0Z2HOs9Wn04FCzI_mreujQPbxeXCRgx7UuZhAtYEKK318IY13Wosm_CL41_SozCqmJrCcdJlEK5NHkGQOeH8_sx1i0073_DsbgTKQ3s5W1woep-0bLiUzFvb77sJcNH_lwqqeVAi0/s320/fifa13art758x426.jpg" />
    </li>
    <li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHPB0wzaSpgQgo5rpLnOc8I3OqvhY6OEgYnZOAcRFXRyVRshgLZ6Ms-Rxy8roOX3AcVzOXMJhl9u5Soe5_1W6s9G6N6Ub_j2upmWjrx8m_Da-DWRVCBjyjgw8O0Juq7ZDH8PJuis3HfyY1/s320/Red_Dead_Redemption.jpg" />
    </li>
    <li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpn27USHjGRCMyCcDOgDZN5oYjf5pAAqyMJkeROlkRgzY7mBo9qD0IzpCW-eoFQ8xYXv3-g26LoYyG3wb7z8YQ_Tn5_4zqUKS09oNWTQ-3rlNOh95n_l3uE324jx4smszcYVYbpH46SPaC/s1600/ICC-T20-Cricket-World-Cup-2012-Official-Jump-Game-Releases-Chance-to-Win-Free-Tickets.jpg" />
    </li>
    <li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUJpGJeWP7lq5wFiL1X21EDyPp68qXxxx2uEp83K00AiWikX5WBnDPi-TGFwmI4xJIx2fALwFcW7DH_7TriTDqUgau561hvMRNA8B5Uyjbjb70RhhXBEGwcdAsyfccfajeVWYsoXTgc4jT/s320/Files-panther+__1387030347_39.41.102.102.jpg" />
    </li>
    <li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5cdWNoBiCILS4KnCa30NxCRAJNT8ykvgJWeyU6M1-mspE5HX5-5Hvw5bKuwboj-7adlcysDAsYSyXopK7P8Zr_JSfhaLuWP0lz2J_3rFtVEJ0F48heLX_dc_IUJdpvpy_Ag4fSDPyuQJ-/s320/need_for_speed_rivals-1522930__1387810465_39.41.201.128.jpg" />
    </li>
    <li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXPmEQEpjpSyyT1Nqm5kvf4ih9Kea7d3F0k9dZJf1R4d5_FpS1W0OLC8X0yjFQx0DIGCnWaSq19W0boUcANylrAZjQl13jllFNLKDWzcOOqGE-kIK82m7QHguBGQ9g6UHIVLvpxQOC6S5Z/s1600/SBK-X-Screenshot-2.jpg" />
    </li>
  </ul>
</div>