Los controles deslizantes de carrusel son ampliamente adoptados en el diseño web por su capacidad para mostrar de manera eficiente servicios, imágenes, características y otros contenidos sin ocupar espacio excesivo. Al implementar un carrusel, puede optimizar la utilización del espacio y mejorar la experiencia general del usuario.
En esta guía, lo guiaré a través del proceso de integración de la funcionalidad de carrusel en su sitio web Divi . Aprovecharemos la biblioteca Swiper.js de una fuente de terceros y aplicaremos CSS personalizado para adaptar el control deslizante a sus preferencias.
Para incorporar la funcionalidad del control deslizante en su sitio web Divi, simplemente invoque la biblioteca swiper.js en el archivo funciones.php de su tema hijo.
Diseñar un control deslizante de carrusel sin complemento
Para habilitar la funcionalidad de nuestro control deslizante, debemos incluir la biblioteca swiper.js en el archivo funciones.php de nuestro tema secundario Divi.
Create Amazing Websites
Con el mejor generador de páginas gratuito Elementor
Empezar ahoraAdemás, debemos insertar un código de configuración que especifique parámetros como el número de columnas que se mostrarán en el control deslizante, si las diapositivas deben repetirse y si la navegación con flechas y la paginación deben estar habilitadas, entre otras configuraciones.
Para obtener una lista completa de las configuraciones disponibles, consulte la página API de Swiper . Ahora, profundicemos en la implementación.
Todo el código PHP debe incorporarse al archivo funciones.php del tema secundario Divi. Puede editar este archivo a través de FTP, el Administrador de archivos de su servidor o utilizando el Editor de temas accesible en el Panel de WordPress. En este caso, procederemos con el Editor de temas.
Para poner en cola la biblioteca swiper.js en nuestro tema secundario, siga estos pasos:
- Vaya a Apariencia → Editor de temas
- Abra el archivo funciones.php en el tema de su hijo y agregue código PHP personalizado.
<?php
// Enqueue Swiper.js Library
function dp_carousel(){
wp_enqueue_script( 'your-swiper-js-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.js', [] , '7.0.2', true );
wp_enqueue_style( 'your-swiper-css-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.css', [] , '7.0.2');
}
add_action('init', 'dp_carousel', 99);
function dp_carousel_slider_scripts() {
?>
<script type="text/javascript">
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.dp-carousel')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '<div class="swiper-pagination"></div>';
// If we need navigation buttons
extraControls += '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
slider.innerHTML = '<div class="swiper-container" style="overflow:hidden">' + slider.innerHTML + '</div>' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
slidesPerView: 1, // mobile value
loop: true,
spaceBetween: 0, // mobile value
autoplay: {
delay: 3000,
},
speed: 600,
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
768: { // Tablet
slidesPerView: 2,
spaceBetween: 20,
},
981: { // Desktop
slidesPerView: 3,
spaceBetween: 30,
}
}
});
}
}, 20);
}
})();
</script>
<?php }
add_action( 'wp_footer', 'dp_carousel_slider_scripts'); - Seleccione Actualizar archivo.
Ahora debemos usar Divi Builder para crear todas las cosas que se mostrarán en nuestro control deslizante. Será necesario agregar ID y clases personalizadas de filas, columnas y módulos. Solo puede haber un diseño de columna y se convertirá en un carrusel según los números de columna especificados en el código PHP de configuración.
Utilicé módulos de Blurb con un hermoso diseño y efectos de desplazamiento para este ejemplo, pero puedes usar cualquier módulo Divi que quieras.
Agregue una sección con una fila de columnas a su página usando Divi Builder.
Busque el módulo de Blurb y agréguelo a la página.
Se puede acceder a la configuración de fila haciendo clic en el símbolo de engranaje en la barra de herramientas verde.
Seleccione Clases e ID de CSS avanzadas.
Incluya dp-carousel en el campo Clase CSS.
Cambiar a la pestaña Contenido
Abra la configuración de columna y agregue la clase swiper-wrapper al campo Clase CSS.
Para personalizar el módulo de publicidad, abra la configuración del módulo y acceda a la pestaña de avance. Luego agregue deslizar el dedo al campo CSS.
Navegue a la pestaña Contenido y haga clic en el botón Texto.
Incluya título y texto del cuerpo.
Agregue una imagen de fondo en el interruptor Fondo.
Ahora, para el diseño del texto del título, aquí están las configuraciones:
- Fuente del título – Abhaya Libre
- Color – #415962
- Tamaño del texto del título: 26 px y 22 px en móviles
Para el cuerpo del texto, siga estas configuraciones.
- Fuente del título: Open Sans
- Color – #879296
- Tamaño del texto del cuerpo: 14 px y 12 px en móviles
- Altura de la línea del cuerpo: 1,5 em
En esta etapa final, agregaremos un espacio de Blurb y CSS personalizado para darle al contenedor de contenido un fondo blanco y una animación de zoom a la imagen de fondo.
Active la opción Espaciado de diseño en la configuración de Blurb.
- Se debe agregar relleno para escritorios. 300px/1.5vw/1.5vw/1.5vw
- Se debe agregar acolchado para tabletas. 220px/30px/30px/30px
- Habría que añadir acolchado para móviles. 200px/20px/20px/20px
Navegue a la pestaña Avanzado y seleccione la casilla de verificación CSS personalizado.
Tamaño de fondo: 100%.
Transición de fondo al campo Elemento principal.
Todas las transiciones son .5s.
Al pasar el mouse, agregue un tamaño de fondo y haga la transición al elemento principal.
105% de tamaño de fondo; Todas las transiciones son .5s.
Para el color de fondo, péguelo en el campo CSS personalizado.
background-color: white;
padding: 30px 1.5vw;Además, debe agregar color de fondo y relleno al campo Contenido de Blurb al pasar el mouse.
background-color: white;
padding: 30px 4vw;
Ahora que hemos completado el módulo de Blurb, podemos replicarlo tantas veces como queramos para agregar nuevos anuncios a nuestro carrusel. Sólo necesitas reemplazar las palabras y modificar la imagen de fondo en cada módulo copiado.
Nuestro control deslizante está casi terminado. Finalmente, agregaremos algo de CSS personalizado para decorar nuestra navegación y paginación deslizante. Este código se puede colocar en Divi/Opciones de tema/CSS personalizado o en el archivo style.css de su tema hijo.
/* DP Slider Navigation */
.dp-carousel .swiper-button-prev {
transform: none;
margin-top: -100px;
top: 10px !important;
margin-left: auto!important;
right: 52px;
font-size: 20px !important;
background-color: #fff;
padding: 25px !important;
}
.dp-carousel .swiper-button-next {
transform: none;
top: 10px !important;
margin-top:-100px;
right: 0px !important;
background-color: #fff;
padding: 25px !important;
}
/* Arrow Size and Style */
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 20px;
color: #aed4e4;
}
/* DP Slider Pagination */
.dp-carousel .swiper-pagination-bullet-active {
background-color: #fff;
}
.dp-carousel .swiper-pagination-bullet {
background-color: #fff;
top: 15px;
}
Ahora aquí está la diapositiva final.
Ultimas palabras
Crear un carrusel en Divi sin utilizar un complemento implica aprovechar la funcionalidad integrada y las opciones de personalización proporcionadas por el tema Divi. Siguiendo este procedimiento, puede crear un carrusel adaptado a su contenido específico y preferencias de diseño sin depender de complementos adicionales.
