The original theme can be found here.
The installation guide for this theme is here.
We will talk about slider customization below, which is used in the GrayScale Magento Theme.
First of all, the slider is based on the cycle jquery library. If you need really advanced motions, you can take a look at their examples.
In the tutorial, you will discover that the slider itself is implemented in the home_page_header static block. Thus, any customization to slide effects and other elements connected with the slider should be performed with the home_page_header html content.
The original code is as follows:
implementation of the slider
slider = jQuery('#slider-content');
adding div, which will hold buttons 1, 2, and 3, representing each image
slider
.before('<div id="stripNav0" class="stripNav">')
initializing movement type and parameters.
.cycle({ fx: 'scrollLeft', timeout: 4000, speed: 1000, next: '.stripNavL', prev: '.stripNavR', pager:'#stripNav0' }); });
Function that changes scrollLeft<>scrollRight, depending on which arrow we click
nextLink = jQuery('#stripNavLa');
prevLink = jQuery('#stripNavRa');
changeFx = function(fx) { opts = $(slider).data('cycle.opts'); opts.currFx = fx; opts.fx = fx; slider.cycle.saveOriginalOpts(opts); }
1. How to remove/add “left” and “right” arrows from the slider
In order to remove the arrows, we can simply hide/delete html that displays arrows.
delete this
<div id="stripNavL0" class="stripNavL" onclick="changeFx('scrollRight')"><a id="stripNavLa" href="#">Left</a></div>
and this
<div id="stripNavR0" class="stripNavR" onclick="changeFx('scrollLeft')"><a id="stripNavRa" href="#">Right</a></div>
2. Remove buttons 1,2,3…
Delete this
, pager:'#stripNav0'
from this line
.cycle({ fx: 'scrollLeft', timeout: 4000, speed: 1000, next: '.stripNavL', prev: '.stripNavR', pager:'#stripNav0' }); });
3. Change scroll effect to fade effect
change fx: 'scrollLeft' to fx: 'fade'
Note that you need to delete the left and right arrows if you are using the fade effect