Ago 17, 2023 | Gratuito, Premium

Cómo Crear un Carrusel Dinámico con Fondos Cambiantes y Contenido Relevante en Divi y sin plugins

Cerrar video

Saben… cuando inicié en el mundo del diseño web, hace 4 años, me encantaba estos diseños, pero jamás supe como hacerlos, y hoy ha llegado el dia de lograrlo con Divi y sin plugins.

Hero carrusel dinámico que cambia el fondo y el texto al deslizar con divi
Diseño creado por JordanAA for Vektora
Hero carrusel dinámico que cambia el fondo y el texto al deslizar con divi y sin plugins
Diseño creado por Creative Travel Website Design Excellent Webworld

Creo que en el mundo del diseño web, la creatividad y la innovación siempre han estado en constante evolución. En esta era digital, las experiencias visuales cautivadoras son esenciales para atraer a los visitantes y mantener su interés. ¿Te has preguntado alguna vez cómo lograr un efecto impresionante en tu sitio web utilizando herramientas comunes y un toque de ingenio? Yo también

En este video tutorial, exploraremos una técnica muy buena que combina la versatilidad de Divi, la potencia de los fondos cambiantes y la interacción con el contenido relevante.

Descarga el Diseño Listo Para Usar por Solo $4.99 y Ahorra Horas de Trabajo

No necesitas recrear todo desde cero. Con la descarga directa de este layout, tendrás acceso instantáneo a este diseño, ahorrándote horas de diseño y desarrollo.

Comprar en

Códigos que usaremos en este ejercicio

CSS para Sección Especial – Apartado Antes

 mix-blend-mode: multiply; 

Paginación

<div class="swiper-pagination"></div>

Librería Swiper y Funcionalidad

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

<script>
  jQuery(document).ready(function($) {
    var uiSlide = new Swiper(".ui-primero", {
      slidesPerView: "auto",
      spaceBetween: 30,
      loop: true,
      navigation: {
        nextEl: ".ui-next",
        prevEl: ".ui-prev",
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
        renderBullet: function(index, className) {
          return '<span class="' + className + '">' + (index + 1) + "</span>";
        },
      },
    });
  });
</script>

<script>
  jQuery(document).ready(function($) {
    $('.ui-nav').appendTo('.ui-fondo');
  });
</script>

<script>
 jQuery(document).ready(function($) {
    function updateUIBasedOnSlide(slideNumber) {
        $(".contenido > div").removeClass("active");
        $(".c-" + slideNumber).addClass("active");
        $(".ui-fondo").removeClass(function(index, className) {
            return (className.match(/(^|\s)background-\S+/g) || []).join(' ');
        }).removeClass('animate-bg');

        $(".ui-fondo").addClass("background-" + slideNumber).addClass('animate-bg');
    }

    $(".ui-fondo").on('animationend', function() {
        $(this).removeClass('animate-bg'); 
    });

    updateUIBasedOnSlide(1);

    $(".swiper-wrapper").on("transitionend", function() {
        var slideNumber = $(".swiper-slide.swiper-slide-active").attr("class").match(/s-(\d+)/)[1];
        updateUIBasedOnSlide(slideNumber);
    });
});

</script>

Estilos css

.ui-fondo.background-1::before {
  background-image: url('https://plus.diviui.com/wp-content/uploads/2023/08/W-La-razon-de-estar-contigo-min.jpg');
}

.ui-fondo.background-2::before {
  background-image: url('https://plus.diviui.com/wp-content/uploads/2023/08/W-Jumanji-min.jpg');
}

.ui-fondo.background-3::before {
  background-image: url('https://plus.diviui.com/wp-content/uploads/2023/08/W-No-hay-home-min.jpg');
}

.ui-fondo.background-4::before {
  background-image: url('https://plus.diviui.com/wp-content/uploads/2023/08/W-Spiderman-min.jpg');
}

.ui-fondo.background-5::before {
  background-image: url('https://plus.diviui.com/wp-content/uploads/2023/08/W-Pixels-min.jpg');
}

.ui-fondo.background-6::before {
  background-image: url('https://plus.diviui.com/wp-content/uploads/2023/08/W-Kung-fu-panda-2-min.jpg');
}

.ui-fondo.background-7::before {
  background-image: url('https://plus.diviui.com/wp-content/uploads/2023/08/W-Passengers-min.jpg');
}


.ui-fondo.background-8::before {
  background-image: url("https://plus.diviui.com/wp-content/uploads/2023/08/bar-24.jpg") ;
}


/* Tarjetas Activas */
.et_pb_module.swiper-slide-active .et_pb_image_wrap.et_pb_only_image_mode_wrap img {
  position: relative;
  height: 400px;
  object-fit: cover;
  transition: 0.6s ease;
}

.et_pb_blurb .et_pb_blurb_content img {
  height: 300px; 
  transition: height 0.3s ease;
  object-fit: cover;
}

/* Estilos Responsivos Tarjetas activas */
/*tablet*/
@media only screen and (max-width: 980px) {
  
  .et_pb_module.swiper-slide-active .et_pb_image_wrap.et_pb_only_image_mode_wrap img {
    height: 300px;
    transition: 0.6s ease;
  }

  .et_pb_blurb .et_pb_blurb_content img {
    height: 250px; 
    transition: height 0.3s ease;
  }
}

/*telefono*/

@media only screen and (max-width: 767px) {
  .et_pb_module.swiper-slide-active .et_pb_image_wrap.et_pb_only_image_mode_wrap img {
    height: 300px;
  }

  .et_pb_blurb .et_pb_blurb_content img {
    height: 250px; 
  }
}


/* Fondos de Imagen */
.ui-fondo {
  transition: background-image 0.5s ease-in-out;
  overflow: hidden;
}


.ui-fondo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;
}

.animate-bg::before {
    animation: bgNext 0.7s forwards;
}

@keyframes bgNext {
  0%   {opacity: 0.4; transform: scale(1.1);}
  100%   {opacity: 1; transform: scale(1);}
}

/* Contenido del Carrusel */
.item-ui {
  opacity:0;
  position: absolute;
transform: translateY(-10%);
  transition: opacity 0.4s ease-in-out, transform 0.5s ease-in-out; 
}

.ui-fondo .contenido > div.active {
  opacity: 1;
  /* animación de los títulos*/
  transform: translateY(0%); 
}

/* Navegación de Números */
.ui-numeros .et_pb_code_inner {
  height: 103%;
}
.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  z-index: 20;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  justify-content: space-between!important;
}
.swiper-pagination-bullet {
  position: relative;
  width: 14px!important;
  height: 14px!important;
  font-size: 1px!important;
  text-align: center;
  line-height: 14px!important;
  color: #fff!important;
  opacity: 1!important;
  background: #585858 !important;   
  z-index: 999;
  transition: 0.3s ease-in-out!important;
}
.swiper-pagination-bullet-active {
  color: #000!important;
  background: #fff!important;
  z-index: 2;
  font-size: 14px!important;
  width: 24px!important;
  height: 24px!important;
  line-height: 24px!important;
  transition: 0.3s ease-in-out!important;
}

/* Estilos Responsivos */
@media only screen and (max-width: 767px) {
  .swiper-pagination-bullet {
    width: 10px!important;
    height: 10px!important;
    font-size: 0!important;
    line-height: 10px!important;
    transition: 0.3s ease-in-out!important;
  }

  .swiper-pagination-bullet-active {
    width: 15px!important;
    height: 15px!important;
    line-height: 10px!important;
    transition: 0.3s ease-in-out!important;
  }

  .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    align-items: center;
    flex-direction: row;
  }
}

@media only screen and (max-width: 767px) {
  .contenido {
    height: 370px;
  } 
}

@media only screen and (max-width: 980px) {
  .contenido {
    height: 260px;
  }

}


/* Estilos Adicionales */
.ui-prev.swiper-button-disabled, .ui-next.swiper-button-disabled {
  opacity: .5!important;
}

.et_pb_icon_wrap:hover .et-pb-icon {
  color: #000!important;
}

.swiper-slide {
  display: flex!important;
  justify-content: center!important;
  align-items: center!important;
}

.ui-fondo.et_pb_section {
  display: flex;
  align-items: center;
}

.ui-fondo .contenido {
  display: flex;
  align-items: center;
}

2 Comentarios

  1. Mario Hurtado

    Me encanto tu carrusel esta de 10
    Mi preg…como hacer para que las imagenes sean mucho mas grades, casi de media pantalla

    Responder
    • Fer Rivera

      Hola Mario, disculpa la tardanza estoy muy ocupado en otras cosas y mi blog lo he dejado casi a un lado.

      En mi video tutorial lo explico cómo hacerlo 😀

      Min 33:52 https://www.youtube.com/watch?v=fiawSs96tkg
      intenta hacer lo mismo pero acorde a lo que necesitas

      Responder

Enviar un comentario

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

Hola, soy Fer!

Por el momento no estoy aceptando nuevos trabajos, gracias por tu comprensión.