Skip to content

Plugin de jQuery - Slider de imágenes completamente adaptativo

License

Notifications You must be signed in to change notification settings

MaximaPuerta/jQuery-MaximaSlide

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Plugin para jQuery - Máxima Slide

Plugin de jQuery - Slider de imágenes completamente adaptativo

Características:

  • Control de tiempo
  • Accesibilidad desde el teclado
  • Mensajes/Captions
  • Parallax
  • Controles para ir adelante o atrás
  • Loop infinito entre elementos
  • Ajuste al alto y ancho de la pantalla

Éste plugin está en Beta, cualquier persona que desee aportar con el proyecto, estoy disponible a sus ayudas. No conozco mucho sobre código profesional, sería de gran ayuda convertirlo en tal.

La estructura HTML requerida para que el plugin trabaje es la siguiente:

<div class="MaximaSlide">
    <div class="controles">
        <button class="boton-anterior">&Precedes;</button>
        <button class="boton-siguiente">&Succeeds;</button>
    </div>
    <div class="slide-w">
        <div class="img-container">
            <div class="img-item" style="background-image: url(ubicacion_de_la_imagen)">
                <div class="mensaje">
                    <h1>Titulo del mensaje</h1>
                    <p>Subtítulo</p>
                </div>
            </div>
        </div>
    </div>
</div>

Si quieres más imágenes, sólo duplica el div <div class="img-item"> y cambia su background-image. Puedes agregar tantas imágenes como gustes.

Para inicializar plugin:

$(".clase-de-elemento").MaximaSlide();

Opciones del plugin con sus valores predeterminados:

tiempoPaso: 3000, /* Tiempo entre cambio de imágenes */
accesibleTeclado: true, /* Indicar si quieres tener la posibilidad de pasar la imagen desde las flechas del teclado */
mensajes: true, /* Habilitar o inhabilitar los mensajes o captions en inglés */
parallax: false, /* Activar efecto Parallax en las imágenes */
mostrarControles: true, /* Mostrar los controles, debe estar especificado el HTML correspondiente, en caso contrario se desactivará automáticamente. */

/*Ejemplo*/
$(".clase-de-elemento").MaximaSlide({
    tiempoPaso: 3000,
    parallax: true
});

Iré agregando características en base a los comentarios y sugerencias. :)

About

Plugin de jQuery - Slider de imágenes completamente adaptativo

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published