Hace algunas semanas, alguien de ustedes me compartió una página para preguntarme si era posible realizar el slider interactivo que consiste en ir cambiando el color del auto a través de unos selectores de color. Obviamente con Divi.
Al ver el ejercicio me pareció una propuesta muy interesante y me dio una idea para un próximo tutorial, así que guardé el enlace de referencia en mi larga lista de ejercicios que tengo por hacer para practicar o replicar algo parecido con Divi y WordPress. ¿Y qué creen? Llegó el día en que ese slider lo hice realidad (ver demo).
Si eres el que me compartió este ejercicio, muchas gracias. De igual forma, gracias a todos los que día con día me envían referencias de sitios web, porque gracias a ustedes la inspiración nunca se acaba. Esto de crear contenido, un video cada semana, no es una tarea fácil porque las ideas cada vez son más complejas de que lleguen, pero hasta el momento hemos hecho las cosas bien y casi cualquier idea la hemos podido convertir en realidad. Así que si en algún momento llegas a encontrarte con una web, sección o funcionalidad que te guste, no dudes en compartirla conmigo porque podemos lograr algo genial con Divi.
Bueno, ya basta de tanto rollo y mejor pasemos a lo que realmente nos interesa: la creación de un slider interactivo de colores en Divi Builder. Y lo mejor es que lo haremos sin plugins.
Este slider te puede servir para mostrar productos que tengan diferentes variantes de color en una sección principal. El ejemplo que hacemos está enfocado en autos, pero realmente puede ser aplicado a cualquier otro producto, siguiendo la misma lógica que te enseñaré en el tutorial.
Para realizar este tutorial vamos a requerir algunos recursos:
1. Descarga las imágenes desde aquí para que sigas el ejemplo real
2. Estructura HTML para crear el selector de colores:
<div class="color-options"> <div class="color-option yellow active" data-color="yellow" title="Amarillo"></div> <div class="color-option red" data-color="red" title="Rojo"></div> <div class="color-option teal" data-color="teal" title="Turquesa"></div> <div class="color-option oxford" data-color="oxford" title="Gris Oxford"></div> <div class="color-option gray" data-color="gray" title="Gris Claro"></div> <div class="color-option white" data-color="white" title="Blanco"></div> </div>
3. Estructura HTML para crear el contenedor de las imágenes:
<div class="car-display">
<div class="car-container">
<img id="carImage" class="car-image current"
src="https://demos.ovdivi.com/wp-content/uploads/2025/07/x55-amarilla.png"
alt="X55 II Amarillo">
</div>
</div>
4. Estilos CSS para darle la apariencia al selector de colores y contenedor de imágenes:
/* =================================
SELECTOR DE COLORES - X55 II
================================= */
.color-options {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
row-gap: 12px;
margin-left: -6px;
margin-right: -6px;
}
.color-options .color-option {
margin-left: 6px;
margin-right: 6px;
}
.color-option {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.color-option:hover {
transform: scale(1.05);
}
.color-option.active {
border: 3px solid #000;
}
/* Colores específicos */
.color-option.yellow { background: #F1C40F; }
.color-option.red { background: #E74C3C; }
.color-option.teal { background: #1ABC9C; }
.color-option.oxford { background: #2C3E50; }
.color-option.gray { background: #95A5A6; }
.color-option.white {
background: #FFFFFF;
border: 3px solid #E0E0E0;
}
.color-option.white.active {
border: 3px solid #000;
}
/* =================================
DISPLAY DE IMÁGENES - X55 II
================================= */
.car-display {
position: relative;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 800px;
width: 100%;
}
.car-container {
position: relative;
width: 100%;
height: 100%;
display: block;
min-height: 300px;
}
.car-image {
width: auto;
height: auto;
object-fit: contain;
position: absolute;
top: 50%;
left: 50%;
transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
transform: translate(-50%, -50%);
}
.car-image.current {
z-index: 2;
}
.car-image.next {
z-index: 1;
transform: translate(50%, -50%);
}
.car-image.sliding-out {
transform: translate(-150%, -50%);
z-index: 1;
}
.car-image.sliding-in {
transform: translate(-50%, -50%);
z-index: 2;
}
@media (max-width: 980px) {
.car-display {
min-height: 600px;
}
}
@media (max-width: 768px) {
.car-display {
min-height: 400px;
}
.color-option {
width: 32px;
height: 32px;
}
}
@media (max-width: 480px) {
.car-display {
min-height: 240px;
}
}
.btn-inline .et_pb_button_module_wrapper {
display: inline-block;
}
5. Código JavaScript para implementar la funcionalidad del slider:
<script>
document.addEventListener('DOMContentLoaded', function() {
// =================================
// CONFIGURACIÓN - X55 II SLIDER
// =================================
const carImages = {
yellow: 'https://demos.ovdivi.com/wp-content/uploads/2025/07/x55-amarilla.png',
red: 'https://demos.ovdivi.com/wp-content/uploads/2025/07/x55-roja.png',
teal: 'https://demos.ovdivi.com/wp-content/uploads/2025/07/x55-turquesa.png',
oxford: 'https://demos.ovdivi.com/wp-content/uploads/2025/07/x55-oxford.png',
gray: 'https://demos.ovdivi.com/wp-content/uploads/2025/07/x55-gris.png',
white: 'https://demos.ovdivi.com/wp-content/uploads/2025/07/x55-blanca.png'
};
const colorNames = {
yellow: 'Amarillo',
red: 'Rojo',
teal: 'Turquesa',
oxford: 'Gris Oxford',
gray: 'Gris Claro',
white: 'Blanco'
};
// =================================
// VARIABLES Y FUNCIONES
// =================================
const colorOptions = document.querySelectorAll('.color-option');
const carContainer = document.querySelector('.car-container');
let carImage = document.getElementById('carImage');
let isAnimating = false;
function changeCarImage(colorKey) {
if (isAnimating) return;
isAnimating = true;
// Ocultar imagen actual inmediatamente
const currentImage = document.querySelector('.car-image.current');
if (currentImage) {
currentImage.style.opacity = '0';
}
// Crear nueva imagen
const newCarImage = document.createElement('img');
newCarImage.className = 'car-image next';
newCarImage.src = carImages[colorKey];
newCarImage.alt = `X55 II ${colorNames[colorKey]}`;
carContainer.appendChild(newCarImage);
newCarImage.onload = function() {
setTimeout(() => {
// Animación de entrada
newCarImage.classList.remove('next');
newCarImage.classList.add('sliding-in', 'current');
// Limpiar después de animación
setTimeout(() => {
if (currentImage) {
currentImage.remove();
}
newCarImage.id = 'carImage';
carImage = newCarImage;
newCarImage.classList.remove('sliding-in');
isAnimating = false;
}, 600);
}, 50);
};
newCarImage.onerror = function() {
carContainer.removeChild(newCarImage);
if (currentImage) {
currentImage.style.opacity = '1';
}
isAnimating = false;
};
}
// =================================
// EVENT LISTENERS
// =================================
colorOptions.forEach(option => {
option.addEventListener('click', () => {
if (isAnimating) return;
// Actualizar estados activos
colorOptions.forEach(opt => opt.classList.remove('active'));
option.classList.add('active');
// Cambiar imagen
const colorKey = option.dataset.color;
changeCarImage(colorKey);
});
});
// Precargar todas las imágenes
Object.values(carImages).forEach(src => {
const img = new Image();
img.src = src;
});
});
</script>
En el transcurso del video te iré mostrando paso a paso dónde pegar o cómo insertar cada uno de estos códigos, así que no te preocupes. Si al final tienes dudas, recuerda que puedes dejar tus preguntas en la sección de los comentarios.
Si este tutorial te encantó, recuerda que tenemos más de 210 tutoriales exclusivos a los cuales puedes tener acceso desde ya, solamente uniéndote a estos tutoriales por solo $10 USD al mes o $96 USD al año. Realmente, créeme que no te vas a arrepentir. Y para que estés tranquilo, te comento que puedes cancelar cuando quieras, es decir, puedes unirte un mes y cancelar el día que tú quieras si ya no deseas seguir suscrito o si los tutoriales no te convencieron (que estoy seguro no será así).
Muchas gracias,
Oscar Viedma
0 comentarios