jQuery Monte

Name: jQuery Monte
Brand: Jose Aguilar
SKU: joseaguilarblog-4115
Availability: InStock
Rating: 5 (1 reviews)

jQuery Monte Carrousel es un plugin de jQuery que nos facilita Jackmoore con el cual podemos presentar contenido en un slider por paneles montándose uno encima del otro y visualizándose en menor medida el anterior y el siguiente item del carrousel.

Si queremos añadir un jQuery Monte Carrousel básico necesitaremos añadir a nuestra página algo de estilos:

#example1 .montePrev, #example1 .monteNext, #example1 .montePlay { 
    display:block; 
    background-image:url(buttons.png); 
    background-repeat:none;
    position:absolute;
    text-indent:-9999px;
}
#example1 .montePrev { width:29px; height:28px; background-position:0 -46px; bottom:-14px; left:376px }
#example1 .montePrev:hover { background-position:0 -6px; }
#example1 .monteNext { width:29px; height:28px; background-position:-70px -46px; bottom:-14px; left:446px;}
#example1 .monteNext:hover { background-position:-70px -6px; }
#example1 .montePlay { width:41px; height:40px; background-position:-29px -120px; bottom:-20px; left:405px; }
#example1 .montePlay:hover { background-position:-29px -80px; }
#example1 .montePaused { background-position:-29px -40px; }
#example1 .montePaused:hover { background-position:-29px 0px; }

La librería jQuery, el plugin y su llamada:

<script src="../jquery.js"></script>
<script src="jquery.monte.js"></script>        
<script>
$(function () {
   $.monte('#example1');
});
</script>

Y finalmente, en el <body> añadiremos el carrousel o slider en el lugar que deseemos:

<div id='example1' class='container'>
   <img src='turtle1.jpg' alt='An eastern mud turtle hatching.'/>
   <img src='turtle2.jpg' alt='Just hatched.'/>
   <img src='turtle3.jpg' alt='After three months.'/>
   <img src='turtle4.jpg' alt='Taking an occassional bask.'/>
   <img src='turtle5.jpg' alt='Ornery but healthy at two and a half years.'/>
</div>

Si quieres ver más ejemplos y las opciones disponibles puedes visitar la página del autor.