Monday, March 14, 2016

Magento- Custom RWD default magento slider

Magento- Custom RWD default magento slider


<?php   $dynemicid = 1?>
                 <div class="class-toPopup" id="toPopup_<?php echo $dynemicid;?>" >
         
                <div class="slider-background">
                    <div class="slideshow-container-pop<?php echo $dynemicid;?>">
                        <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<?php echo $dynemicid;?>">&nbsp;</div>
                    <span class="slideshow-prev">Previous</span>
                    <span class="slideshow-next">Next</span>
                    </div>
                </div>
              
                </div>
              
                <style>
                .slideshow-pager<?php echo $dynemicid;?> {
                    -moz-user-select: none;
                    overflow-x: hidden;
                    overflow-y: hidden;
                    position: absolute;
                    text-align: center;
                    top: auto;
                    width: 100%;
                    z-index: 115;
                }
                .slideshow-pager<?php echo $dynemicid;?> span {
                 color: #dddddd;
                    cursor: pointer;
                    display: inline-block;
                    font-family: "Roboto",sans-serif;
                    height: 10px;
                    width: 10px;
                }
                .slideshow-pager<?php echo $dynemicid;?> 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<?php echo $dynemicid;?> span:hover:before {
                  background-color: #fff;
                  border:1px #999 solid;
                }
                .slideshow-pager<?php echo $dynemicid;?> span.cycle-pager-active:before {
                  background-color: #fff;
                  border:1px #999 solid;
                }
                .slideshow-pager<?php echo $dynemicid;?> > * {
                  cursor: pointer;
                }
      
                </style>
              
            <script>          

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

No comments :

Post a Comment