:: CP - Recursos Web ::

Slide head

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: Slide head

Fecha: 2013-07-26

Creditos: Desconocido

Recurso para:

Garantia: SI?

Descripción:

Slide head es un muy buen script que en la mayoría de las veces se utiliza para la parte superior de la pagina, como eslogan principal, puedes colocar los principales anuncio, novedades, noticias de tu sitio.

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

<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/7stcg3oih5y9egu/easyslider1-5.js></script>
<script type="text/javascript">
        $(document).ready(function(){   
            $("#slider").easySlider({
                controlsBefore:    '<p id="controls">',
                controlsAfter:    '</p>',
                auto: true,
                continuous: true
            });
            $("#slider2").easySlider({
                controlsBefore:    '<p id="controls2">',
                controlsAfter:    '</p>',       
                prevId: 'prevBtn2',
                nextId: 'nextBtn2'   
});});</script>
<style type="text/css">
img{border:none;}
#container2{margin:0 auto;position:relative;text-align:left;width:696px;background:#fff;margin-bottom:2em;}   
#content2{position:relative;} #slider{} #slider2 li p{margin:20px;} 
#slider ul, #slider li, #slider2 ul, #slider2 li{margin:0;padding:0;list-style:none;}
#slider li, #slider2 li{width:696px;height:241px;overflow:hidden;}   
#slider2 li{background:#f1f1f1;} #slider2 li h2{margin:0 20px;padding-top:20px;}                         
p#controls, p#controls2{margin:0;position:relative;}
#prevBtn, #nextBtn, #prevBtn2, #nextBtn2{display:block;margin:0;overflow:hidden;text-indent:-8000px;       
width:30px;height:77px;position:absolute;left:-30px;top:-160px;}   
#nextBtn, #nextBtn2{left:696px;}                                                       
#prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{display:block;width:30px;height:77px;
background:url("https://img.webme.com/pic/c/cssplantillas/slideprevleft.gif") no-repeat 0 0;}   
#nextBtn a, #nextBtn2 a{background:url("https://img.webme.com/pic/c/cssplantillas/slideprevright.gif") no-repeat 0 0;}                                               
</style>

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:
Edita donde dice "URL DE TU IMAGEN", esta configurado para imágenes de "696px × 241px" si lo deseas editar hazlo donde lo indica el "css" en el primer script.
- Para cualquier consulta visita nuestro Foro de soporte.

Ya lo han visto 190 visitantesGracias por tu visita!

Recomendamos:

| CERRAR