Nivo Slider es uno de los más fáciles de instalar y de buen funcionamiento y aspecto.

Para hacerlo funcionar en Magento lo que necesita saber es sólo un par de trucos.

En este post voy a explicar cómo conseguir que Nivo Slider trabaje en Magento.

1. Copie los siguientes archivos en la carpeta de Magento:

jquery-1.6.1.min.js -> magento folder/js/nivo/

los archivos CSS y botones a Magento folder/skin/frontend/default//css/nivo/

2. Abra el siguiente archivo: carpeta de Magento/app/design/frontend/default//layout/page.xml.

Agregue el siguiente código en el elemento de block head:

<action method="addJs"><script>nivo/jquery.nivo.slider.pack.js</script></action>
<action method="addCss"><stylesheet>css/nivo/nivo-slider.css</stylesheet></action>
<action method="addCss"><stylesheet>css/nivo/default.css</stylesheet></action>

Asegúrese de ponerlo ANTES de:

<action method="addJs"><script>prototype/prototype.js</script></action>

3. Abra el panel de administración y vaya a: CMS >Páginas

4. Seleccione la página a la que quiere implementar Nivo Slider.

5. Vaya a la pestaña de "Contenido" añada el siguiente código:

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider"><img src="skin/frontend/default/your theme/images/mainbanner-1.jpg" alt="" />
<a href="http://www.website.com"><img src="skin/frontend/default/your theme/images/mainbanner-2.jpg" alt="" /></a>
<a href="http://www.website.com"><img src="skin/frontend/default/your theme/images/mainbanner-3.jpg" alt="" /></a>
<a href="http://www.website.com"><img src="skin/frontend/default/your theme/images/mainbanner-4.jpg" alt="" /></a>
</div>
</div>
 
<script type="text/javascript">// <![CDATA[
    jQuery(window).load(function() {
        jQuery('#slider').nivoSlider({effect:'slideInRight'});
    });
// ]]></script>

Si usted está teniendo problemas con el código asegúrese de cambiar el $ en el javascript por jQuery porque probablemente está generando algún conflicto en el condigo.

6. Guarde la página y listo!