Magento 1.9 - Custom RWD default magento slider

Custom RWD default magento slider

Below are the simple scripts steps

HTML

 

 

  

  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 
 Previous
 Next
 

CSS

.slideshow-pager {
-moz-user-select: none;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
text-align: center;
top: auto;
width: 100%;
z-index: 115;
}
.slideshow-pager span {
color: #dddddd;
cursor: pointer;
display: inline-block;
font-family: "Roboto",sans-serif;
height: 10px;
width: 10px;
}
.slideshow-pager span:before {
background-color: #ccc;
border-radius: 10px;
content: "";
display: block !important;
height: 8px;
left: 50%;
margin-left: -8px;
margin-top: -8px;
position: relative;
top: 50%;
width: 8px;
}
.slideshow-pager span:hover:before {
background-color: #fff;
border:1px #999 solid;
}
.slideshow-pager span.cycle-pager-active:before {
background-color: #fff;
border:1px #999 solid;
}
.slideshow-pager > * {
cursor: pointer;
}

JS

        
$j(document).ready(function () {
  $j('.slideshow-container-pop .slideshow').cycle({
  slides: '> li',
  pager: '.slideshow-pager',
  pagerTemplate: '',
  speed: 600,
  pauseOnHover: true,
  swipe: true,
  prev: '.slideshow-prev',
  next: '.slideshow-next',
  fx: 'scrollHorz',
  timeout: 0
 });  
});