ADD Lemmon Slider to Sterix Template

Hi,

I manage to solve it.
1.upload the lemmon-slider.js in to skin\frontend\default\jm_sterix\js\
2. add below line in to app\design\frontend\default\jm_sterixtemplate\pag e\html\head.phtml
<script type="text/javascript" src="<?php echo $this->getSkinUrl(‘js/lemmon-slider.js’) ?>"></script>

3.update the theme.css with

.lemmon-slider { position: relative; padding: 10px 40px; }

.lemmon-slider .slider { overflow: hidden; position: relative; }
.lemmon-slider .slider ul { margin: 0; padding: 0; }
.lemmon-slider .slider li { float: left; margin: 5px; list-style: none; padding: 0; line-height: 1; width: 220px; }
.lemmon-slider .slider li a { display: block; text-align: center; }
.lemmon-slider .slider li img { opacity: 0.6; }
.lemmon-slider .slider li:hover img { opacity: 1; }
.lemmon-slider .controls a {
position: absolute;
top: 50%;
margin-top: -11px;
background-position: left bottom;
background-repeat: no-repeat;
display: block;
width: 22px;
height: 22px;
text-indent: -9999em;
overflow: hidden;
}

.box-up-sell .lemmon-slider .controls a {
top: 115px;
}

.lemmon-slider .controls a:hover,
.lemmon-slider .controls a:focus,
.lemmon-slider .controls a:active {
background-position: left top;
}

.lemmon-slider .controls .prev-slide {
left: 0;
background-image: url(../images/pre.png);
}

.lemmon-slider .controls .next-slide {
right: 0;
background-image: url(../images/next.png);
}

4.update the CMS/static block as per your needs

Thanks

That’s great and thanks for sharing.