• Publicidad
  • Contacto
Tech News, Magazine & Review WordPress Theme 2017
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco Tech
Sin resultados
Ver todos los resultados

Basic jQuery Slider – Un slideshow para mostrar todo tipo de contenido

Diego Cambiaso por Diego Cambiaso
06/03/2018
Compartir en FacebookCompartir en TwitterCompartir en WhatsappCompartir en TumblrCompartir en Telegram

Basic jQuery Slider - slideshow con jQuery para mostrar todo tipo de contenido

La cantidad de slideshow desarrollados con jQuery es impresionante y los hay muy variados como Rotating Image Slider que tiene forma de abanico.

Basic jQuery Slider es un slideshow desarrollado con jQuery y que permite mostrar todo tipo de contenido, incluído videos.

Principales características:

  • Los slides pueden contener cualquier código HTML válido.
  • Permite pasar entre slide con animación de desvanecimiento.
  • Corre en los navegadores modernos.
  • Es muy sencillo de personalizar.
  • Soporta navegación por teclado.
  • Es muy liviano, pesa solo 4.6kb comprimido.
  • Es completamente gratis.

Cómo implementar Basic jQuery Slider

Enlazar los archivos JS:

<script src="js/libs/jquery-1.6.2.min.js"></script>
<script src="js/basic-jquery-slider.js"></script>

Crear el código HTML que contendrá el slide

Se necesita un código HTML como el del siguiente ejemplo para crear el slideshow en la página:

<div id="mi-slideshow">
<ul class="">
<li><!-- Agregar el contenido a mostrar --></li>
<li><!-- Cualquier tipo de contenido --></li>
</ul>
</div>

Activar el plugin jQuery

El siguiente código activa la presentación y cambiando algunos de los valores se logra personalizar por ejemplo el tamaño:

$(document).ready(function(){
$('#my-slideshow').slidey({
'width' : 940,
'height' : 340,
'showMarkers' : true,
'showControls' : true,
'centerMarkers' : false
});
});

Basic jQuery Slider

Sitio: basic-slider.com

Vía: www.webresourcesdepot.com/themable-and-customizable-content-slider-basic-jquery-slider

Tags: basic jquery sliderdesarrollo webJavascriptjQueryplugin jqueryprogramacion webslidesho jquery
Diego Cambiaso

Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer Blogger desde el 2006, creador de Pixelco Tech News. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

Siguiente
Photo effects

Photo effects - Editor de imágenes online para efectos vintage, retro..

Comentarios 2

  1. Info says:
    11 años

    hola si alguien me pudiera ayudar con el codigo, y modificarlo ya que cuando termina de pasar las imagenes, en vez de volver a mostrar la primera, lo que hace es pasarlas todas hacia atras para volver a mosrarlas.por si alguien no se hace a la idea les pongo mi web donde podran verlo.gracias. se donde lo tengo que modificar prestashop/modules/jqueryslider/js/easySlider1.5.jspero no se que linea. es importante gracias
    enlace de mi web: http://www.juegos-didacticos.com              info@juegoseducativosonline.com

Tech

Diego Cambiaso

VideosReviews - Tutoriales
4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

Diego Cambiaso
26/05/2023
Lenovo ThinkPhone conoce todos los detalles, características y conectividad

Lenovo ThinkPhone conoce todos los detalles, características y conectividad

Diego Cambiaso
15/05/2023
SMARTFILMS 2023 participa de la novena edición de este festival de cine realizado con smartphones

SMARTFILMS 2023 participa de la novena edición de este festival de cine realizado con smartphones

Diego Cambiaso
13/04/2023
Motorola celebra el 50º aniversario de la primera llamada comercial desde un teléfono móvil

Motorola celebra el 50º aniversario de la primera llamada comercial desde un teléfono móvil

Diego Cambiaso
03/04/2023
4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

26/05/2023
Se abren registros de Solve For Tomorrow 2023, el programa que incentiva a los jóvenes a proponer ideas para mejorar su comunidad

Se abren registros de Solve For Tomorrow 2023, el programa que incentiva a los jóvenes a proponer ideas para mejorar su comunidad

25/05/2023
Estos son los nuevos TVs Neo QLED 2023 y barras de sonido

Estos son los nuevos TVs Neo QLED 2023 y barras de sonido

24/05/2023
Pixelco Tech

Pixelco Tech

Pixelco es sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

Objetivo de Pixelco

Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

Buscar

Sin resultados
Ver todos los resultados
  • Contacto
  • Publicidad
  • Sobre Pixelco
  • Política de Privacidad

© 2023 Pixelco por Diego Cambiaso.

Sin resultados
Ver todos los resultados
  • Publicidad
  • Contacto
  • Política de Privacidad
  • Sobre Pixelco
  • Internet
    • Recursos
    • Diseño
    • Desarrollo/programación
  • Tecnología
  • Noticias
  • Fotografía

© 2023 Pixelco por Diego Cambiaso.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist