Cerrar video

Cómo crear un background slideshow con efectos de animación y transición en divi sin plugins

por | Oct 6, 2021 | Tutorial gratuito | 5 Comentarios

En este tutorial gratuito aprenderás a crear una presentación de diapositivas de fondo (background slideshow) con efectos de animación y transición en divi sin plugins.

Este efecto lo lograremos con una librería jQuery llamada Vegas.js. Esta librería cuenta con muchas opciones de configuración para poder personalizar nuestro fondo animado o slideshow.

Cómo crear un background slideshow con efectos de animación y transición en divi sin plugins

Para integrar esta librería con divi necesitamos algunos fragmentos de código que te enlisto a continuación…

1. Enlazar la librería CSS y JS de Vegas.js con divi:

<link rel="stylesheet" href="https://jaysalvat.github.io/vegas/releases/latest/vegas.min.css">
<script src="https://jaysalvat.github.io/vegas/releases/latest/vegas.js"></script>

2. jQuery para inicializar Vegas.js:

<script>
jQuery(document).ready(function($){  
$("#ovSlideshow").vegas({
  overlay: true,
  transition: 'fade', 
  transitionDuration: 4000,
  delay: 10000,
  animation: 'random',
  animationDuration: 20000,
  slides: [
        { src: "https://ununsplash.imgix.net/reserve/RONyPwknRQOO3ag4xf3R_Kinsey.jpg?fit=crop&fm=jpg&h=700&q=75&w=1600" },
        { src: "https://unsplash.imgix.net/photo-1414438992182-69e404046f80?fit=crop&fm=jpg&h=625&q=75&w=1600" },
        { src: "https://unsplash.imgix.net/photo-1414490929659-9a12b7e31907?fit=crop&fm=jpg&h=800&q=75&w=1600" },
        { src: "https://unsplash.imgix.net/uploads/14129863345840df499fc/0165574c?fit=crop&fm=jpg&h=600&q=75&w=1600" }
    ]
});
});
</script>

3. Por último si deseas cambiar el color de la barra de proceso (es opcional) pega el siguiente código CSS en los ajustes de la página > Avanzado > CSS Personalizado:

.vegas-timer-progress {
  background: #fff; /* reemplazar color */
}

4. Aquí tienes la documentación de las opciones que puedes configurar en vegas.js.

Esto es todo, obviamente te recomiendo ver el video para que sepas que pasos debes seguir para integrar estos fragmentos de código con divi.

Si tienes alguna duda o pregunta puedes usar la sección de los comentarios, estaré encantado de ayudarte.

Saludos.

5 Comentarios

  1. Rolando Laurente

    Hola OVdivi,

    Funciona muy bien pero cuando estoy logueado, en modo anónimo no ejecuta el script, agradecido por cualquier orientación.

    Responder
    • Oscar Viedma

      Hola Rolando dirígete a Divi > Opciones del tema > General > Performance y deshabilita: Defer jQuery And jQuery Migrate.

      Responder
      • Rolando Laurente

        Muchas gracias OVdivi, funcionó

        Responder
  2. Augusto

    Buenos días. Realizando el tutorial he parado😰 porque el slider no se vé, pero en cambio si me dirijo al personalizador de temas de divi si me sale las imágenes y las transiciones de las mismas. ????????

    Responder
    • Oscar Viedma

      Hola Augusto, dirígete a Divi > Opciones del tema > General > Performance y deshabilita: Defer jQuery And jQuery Migrate.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$6 USD / mes

Pin It on Pinterest