Magento 1.9 - Custom RWD default magento slider

Custom RWD default magento slider

Below are the simple scripts steps

HTML

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<div class="slider-outer">  <div class="slideshow-container-pop">   <ul class="slideshow">   <li><a href="javascript:void(0);"><img alt="" src="PUT IMAGE URL HRE"> </a></li>   <li><a href="javascript:void(0);"><img alt="" src="PUT IMAGE URL HRE"> </a></li>   <li><a href="javascript:void(0);"><img alt="" src="PUT IMAGE URL HRE"> </a></li>   <li><a href="javascript:void(0);"><img alt="" src="PUT IMAGE URL HRE"> </a></li>   <li><a href="javascript:void(0);"><img alt="" src="PUT IMAGE URL HRE"> </a></li>   <li><a href="javascript:void(0);"><img alt="" src="PUT IMAGE URL HRE"> </a></li>   <li><a href="javascript:void(0);"><img alt="" src="PUT IMAGE URL HRE"> </a></li>   <li><a href="javascript:void(0);"><img alt="" src="PUT IMAGE URL HRE"> </a></li>   <li><a href="javascript:void(0);"><img alt="" src="PUT IMAGE URL HRE"> </a></li>   </ul>  <div class="slideshow-pager"> </div>  <span class="slideshow-prev">Previous</span>  <span class="slideshow-next">Next</span>  </div> </div>

CSS

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

.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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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