:: CP - Recursos Web ::

JCarousel

EJEMPLO

Por un tema de una mejor visualización del ejemplo, este será en una pagina externa a esta. La cual es administrada exclusivamente por nosotros.

CLICK AQUI PARA VER EJEMPLO

[ SABER MÁS DE ESTO? ]

INFORMACIÓN

Nombre: JCarousel

Fecha: 2013-11-03

Creditos: Seballero.com

Recurso para:

Garantia: SI?

Descripción:

JCarousel es un excelente recurso para que puedas mostrar tus imágenes a tus usuarios. Este recurso es muy compatible con casi todos los navegadores y se puede perfeccionar para crear slider y más efectos con este mismo script.

- Codigo 01: Por encima de la pagina o extra head:

<style>
.jcarousel-clip {width: 500px;position:relative;overflow: hidden;}
.jcarousel-clip li{width: 500px;float:left;}
.jcarousel-clip li img{border-radius:10px 10px 10px 10px;width:500px;height:350px;} /* ANCHO DE LA GALERIA */
#jcarrucp{width: 500px;position:relative;border:2px solid #FFF;}
#jcarrucp a{color:#fff;text-decoration:none;}
#prev, #forw{padding:20px 0;background:#000;text-align:center;width:30px;color:#eaeaea;
text-decoration:none;font-size:26px;font-family:arial;display:block;font-weight:bold;}
#prev{position:absolute;z-index:10;top:40%;border-radius:0px 5px 5px 0px;opacity:0.8;filter:alpha(opacity=80);}
#forw{position:absolute;z-index:10;right:0;top:40%;border-radius:5px 0px 0px 5px;opacity:0.8;filter:alpha(opacity=80);}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/zwbs3zzkg0qwb7j/jcarousel.js"></script>
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
jQuery('#forw').bind('click', function() {carousel.next();return false;});
jQuery('#prev').bind('click', function() {carousel.prev();return false;});};
jQuery(document).ready(function() {
jQuery("#carrusel").jcarousel({ scroll :1, auto: 5, jcarrucp : "both",
initCallback: mycarousel_initCallback,buttonNextHTML: null,buttonPrevHTML: null });});
</script>

Copiar codigo

- Codigo 02: Donde quieras que aparezca:

Copiar codigo

ENLAZANOS

URL DIRECTA

LINK'S HTML

URL CORTA

Descarga

Ahora puedes descargar nuestros recursos, (No en todos los recursos esta disponible esta opcion, disfrutalo

)

DESCARGA NO DISPONIBLE

[ CLICK PARA VER TUTORIAL ]

NOTAS:
Puedes incluir todas las imágenes que quieres no tiene limite, para agregar más debes incluir esta linea: <li><img src="URL IMÁGEN 1"/></li> - Para cualquier consulta visita nuestro Foro de soporte.

Ya lo han visto 7 visitantesGracias por tu visita!

Recomendamos:

| CERRAR