Cómo crear un carrusel en el que se puede hacer clic de módulos Divi

La publicación de hoy fue enviada por Michelle Nunan de Divi Soup, hogar de «Divi Kitchen», donde constantemente prepara nuevos y útiles tutoriales y cursos electrónicos de Divi.

Los carruseles son una característica popular de los sitios web. Le permiten mostrar más contenido sin ocupar espacio adicional y también agregan un elemento de interactividad a su sitio web que puede alentar a sus visitantes a interactuar más con su contenido.

Hay una serie de excelentes complementos que pueden ayudar a mostrar su contenido en un carrusel, pero en esta publicación le mostraré cómo crear un carrusel de módulos Divi en el que se puede hacer clic usando solo CSS y Javascript.

Este efecto se puede utilizar con casi cualquiera de los módulos Divi estándar o una combinación de módulos. Le mostraré cómo crear este carrusel usando el módulo de imagen y luego con el módulo de blog, ya que el proceso es ligeramente diferente. A partir de ahí, debe comprender cómo puede crear su propio carrusel con casi cualquiera de los módulos estándar.

Resultado

Esto es con lo que deberías terminar después de crear un carrusel con el módulo de blog

Puede ver una demostración en vivo aquí que muestra el efecto usando varios módulos Divi Builder.

Entonces empecemos.

Agregar una nueva página

Comenzaremos creando un carrusel con el módulo de imagen. Agregue una nueva página o abra una página a la que desee agregar el carrusel.

Agregar una nueva sección

Agregue una nueva sección estándar a su página con una sola columna. Luego abra la configuración de la sección y en la pestaña Avanzado, agregue la clase ds-carousel-section en el campo Clase CSS.

Como vamos a cambiar la forma en que se muestran la sección y las filas, solo queremos que estos cambios se apliquen a nuestro carrusel, por lo tanto, agregamos una clase personalizada para evitar que nuestro código afecte a otros elementos de nuestro sitio.

Luego Guardar y Salir de la sección.

Ahora abra la configuración de la fila y en la pestaña Avanzado, agregue la clase ds-carousel-row en el campo Clase CSS. Luego Guardar y Salir de la fila.

A continuación, vamos a agregar un módulo de imagen a nuestra fila. Haga clic en Insertar módulo(s) y seleccione el Módulo de imagen de la lista.

En la pestaña Contenido del módulo de imágenes, haga clic en Cargar una imagen y seleccione la imagen deseada de la biblioteca de medios o cargue una nueva.

Si desea que sus imágenes se abran en una caja de luz, seleccione esta opción en la configuración.

Alternativamente, puede agregar una URL para abrir una nueva página cuando se hace clic en la imagen si lo desea.

Lo último que debemos hacer con el módulo es agregar una clase. Haga clic en la pestaña Avanzado y agregue la clase ds-carousel-module en el campo Clase CSS. Luego Guardar y Salir del módulo.

Ese es uno de nuestros módulos terminado, pero vamos a necesitar más de una sola imagen para crear el carrusel. El código que proporcionaré más adelante en esta publicación mostrará 5 imágenes a la vez, por lo que necesitaremos al menos 6 imágenes para que nuestros botones de carrusel tengan algún efecto y deslicen nuestro contenido.

Usando la función de clonación de Divi, duplique el módulo de imagen tantas veces como desee que las imágenes se muestren en su carrusel.

Cuando haya terminado, su sección debería verse así, con sus módulos de imagen apilados en una sola fila.

Deberá abrir la configuración de cada módulo e intercambiar sus imágenes y la URL si la agregó.

Esa es la configuración del contenido completo, ahora vamos a crear la navegación.

Agregar una nueva sección

Agrega una nueva sección directamente debajo de la sección de tu imagen, esta vez con dos columnas.

Abra la configuración de la fila y en la pestaña Avanzado agregue la clase ds-arrow-row en el campo Clase CSS. Luego Guardar y Salir de la fila.

Añadir la navegación

A continuación, agregue un módulo de texto a cada una de las dos columnas de esta fila.

Ahora necesitamos crear campos de entrada para que actúen como nuestros botones de navegación. Abra el módulo de texto en la columna izquierda y en el área de contenido, pegue el siguiente código HTML:

01
<input id="ds-arrow-left" type="button" value="8">

Luego Guardar y Salir del módulo.

A continuación, abra el módulo de texto en la columna derecha y pegue el siguiente HTML:

01
<input id="ds-arrow-right" type="button" value="9">

Luego Guardar y Salir del módulo.

Estamos otorgando a estos campos de entrada ID únicos de ds-arrow-left y ds-arrow-right para que podamos diseñarlos con CSS y orientarlos con JavaScript para decirles lo que queremos que hagan cuando se haga clic en ellos.

Los valores 8 y 9 se refieren a las flechas dobles izquierda y derecha de la familia de fuentes ET Modules .

Eso es todo lo que tenemos que hacer en el constructor. Si revisa la parte frontal de su página ahora, será solo una sola columna de imágenes y luego dos pequeños botones grises con 8 y 9 en ellos y no harán nada. Así que vayamos a la parte divertida, agregando nuestro código.

Agrega el CSS

Aconsejaría agregar el siguiente CSS a su tema secundario, pero si no está utilizando un tema secundario , está bien agregarlo a Divi> Opciones de tema> General> CSS personalizado y asegúrese de presionar Guardar.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
/*Hide the section overflow*/
.ds-carousel-section {
    width: 100%;
    overflow: hidden;
}
 
/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 1000vw;
    max-width: 1000vw;
}
 
@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1000vw !important;
    }
}
 
@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1000vw !important;
    }
}
 
/*Style the navigation arrows*/
#ds-arrow-left,
#ds-arrow-right {
    color: #fff;
    background: gray;
    font-family: 'ETModules';
    font-size: 30px;
    padding: 5px 30px;
    border-style: none;
    border-radius: 0;
    cursor: pointer;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
 
/*Position the left arrow*/
#ds-arrow-left {
    float: right;
    margin-right: 5px;
}
 
/*Position the right arrow*/
#ds-arrow-right {
    float: left;
    margin-left: 5px;
}
 
/*Style navigation arrows on hover*/
#ds-arrow-left:hover,
#ds-arrow-right:hover {
    -webkit-box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
}
 
/*Style navigation arrows on click*/
#ds-arrow-left:active,
#ds-arrow-right:active {
    -webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}
 
/*Make sure the modules span their entire container*/
.ds-carousel-module .column {
    float: left;
    width: 100% !important;
    margin-right: 0 !important;
}
 
/*Set the module width*/
.ds-carousel-module {
    width: 20vw; /*Change this value to increase or decrease the module displayed per page*/
    padding: 0 30px;
    float: left;
    position: relative;
    margin-bottom: 0 !important;
}
 
/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
    /*Show 3 modules per page on tablets*/
    .ds-carousel-module {
        width: 33.33vw;
    }
    /*Align the navigation on smaller screens*/
    #ds-arrow-row .et_pb_column {
        width: 50% !important;
    }
}
 
@media all and (max-width: 479px) {
    /*Show 1 module per page on mobiles*/
    .ds-carousel-module {
        width: 100vw;
    }
}

Edite el CSS para sus necesidades

Es posible que deba editar algunas de las declaraciones CSS según la cantidad de módulos que use en su carrusel.

¡Ahora un poco de matemáticas!

Esta declaración establece el ancho de la fila que contiene los módulos.

01
02
03
04
05
06
/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 1000vw;
    max-width: 1000vw;
}

Para hacer flotar nuestros módulos uno al lado del otro, con algunos sentados fuera del área visible, necesitamos aumentar el ancho de la fila.

Si está mostrando un total de 15 módulos con 5 por página, terminará con 3 páginas. Entonces, el ancho visible de la fila debe ser:

(15 / 5) x 100 = 300.

Por lo tanto, deberá cambiar los valores de 1000vw a un mínimo de 300vw. (No importa si inserta un número mayor, ya que JavaScript se encargará de no mostrar páginas vacías adicionales). Entonces su CSS ajustado se vería así:

01
02
03
04
05
06
/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 300vw;
    max-width: 300vw;
}

Con las consultas de los medios es ligeramente diferente. Como el CSS está configurado para mostrar 3 imágenes por página en pantallas de 1024 px de ancho o menos, y 1 imagen por página en pantallas de 479 px de ancho o menos, necesitamos ajustar las matemáticas para reflejar eso:

(15 / 3) x 100 = 500 (para tabletas)

(15 / 1) x 100 = 1500 (para móviles)

Su CSS ajustado se vería así:

01
02
03
04
05
06
07
08
09
10
11
12
13
@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 500vw !important;
    }
}
 
@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1500vw !important;
    }
}

Si lo desea, puede modificar todos estos valores a un ancho mayor que el número total de módulos que está utilizando para simplificar. Entonces, en el ejemplo mencionado anteriormente, ese valor sería 1500vw o más.

También es posible que desee cambiar la cantidad de módulos que se muestran por página. Esta declaración CSS es donde puede ajustar eso.

01
02
03
04
05
06
07
08
/*Set the module width*/
.ds-carousel-module {
    width: 20vw; /*Change this value to increase or decrease the modules displayed per page*/
    padding: 0 30px;
    float: left;
    position: relative;
    margin-bottom: 0 !important;
}

El valor de ancho de 20vw muestra 5 imágenes por página, y es solo un porcentaje de 100. Entonces, 25vw mostraría 4 imágenes por página y 16.66vw mostraría 6 imágenes por página, y así sucesivamente.

Puede hacer lo mismo para las consultas de medios:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
    /*Show 3 modules per page on tablets*/
    .ds-carousel-module {
        width: 33.33vw;
    }
    /*Align the navigation on smaller screens*/
    #ds-arrow-row .et_pb_column {
        width: 50% !important;
    }
}
 
@media all and (max-width: 479px) {
    /*Show 1 module per page on mobiles*/
    .ds-carousel-module {
        width: 100vw;
    }
}

Recuerde que si cambia la cantidad de imágenes que se muestran por página, es posible que también deba ajustar el valor del ancho de fila que se mencionó anteriormente.

Si revisa su página nuevamente ahora, todo debería tener un estilo agradable y parecerse a un carrusel, pero para que funcione, necesitamos agregar algo de JavaScript.

Agregar el JavaScript

Copie y pegue el siguiente código en Divi > Opciones de tema > Integraciones > Agregar código al <head> de su blog y asegúrese de Guardar.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
<script type="text/javascript">
(function ($) {
 
var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;
 
function mn_next_slide(item) {
        mn_end_index = ( item.length / mn_visible ) - 1; //End index
     
        if (mn_index < mn_end_index ) {
            mn_index++;
            item.animate({'left':'-=100vw'}, 1000);
        }
}
 
function mn_previous_slide(item) {
        if (mn_index > 0) {
             mn_index--;
             item.animate({'left':'+=100vw'}, 1000);
        }
}
 
function mn_first_slide(item) {
        if (mn_index > 0) {
             var move_vw = (100 * mn_index);
             item.animate({'left':'+='+move_vw+'vw'}, 1000);
             mn_index = 0;
        }
}
 
function mn_set_visible() {
    if ($(window).width() < 480) {     
        mn_visible = 1;
    } else if ($(window).width() < 1025) {
        mn_visible = 3;
    }
}
 
function mn_carousel_init() {
    mn_set_visible();
 
    var item = $('.ds-carousel-module');
  
    $('#ds-arrow-right').click(function() {
        mn_next_slide(item);
    });
  
    $('#ds-arrow-left').click(function() {
        mn_previous_slide(item);
    });
      
    $(window).resize(function() {
        mn_set_visible();
        mn_first_slide(item);
    });
 
}
 
$(document).ready(function() {
    mn_carousel_init();
});
 
})(jQuery)
</script>

Este código agrega funcionalidad a nuestros botones, moviendo la fila hacia la izquierda y hacia la derecha al hacer clic para mostrar los módulos.

Hay un par de áreas que quizás quieras editar:

01
02
03
var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;

El mn_visible = 5; La variable se corresponde con la cantidad de módulos que se muestran por página en el escritorio. Entonces, si cambió esto en el CSS como se mencionó anteriormente, también querrá cambiar este valor.

Asimismo, esta función ajusta el número de imágenes mostradas en tabletas y móviles. Entonces, si cambió esto en el CSS, ajuste los valores mn_visible aquí también.

01
02
03
04
05
06
07
function mn_set_visible() {
    if ($(window).width() < 480) {     
        mn_visible = 1;
    } else if ($(window).width() < 1025) {
        mn_visible = 3;
    }
}

Finalmente, tenemos la velocidad a la que se mueve el carrusel. Se establece aquí como 1000. Esta es la velocidad en milisegundos: 1000 milisegundos = 1 segundo.

Puede ajustar este valor para acelerar o ralentizar la animación.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
function mn_next_slide(item) {
        mn_end_index = ( item.length / mn_visible ) - 1; //End index
     
        if (mn_index < mn_end_index ) {
            mn_index++;
            item.animate({'left':'-=100vw'}, 1000);
        }
}
 
function mn_previous_slide(item) {
        if (mn_index > 0) {
             mn_index--;
             item.animate({'left':'+=100vw'}, 1000);
        }
}
 
function mn_first_slide(item) {
        if (mn_index > 0) {
             var move_vw = (100 * mn_index);
             item.animate({'left':'+='+move_vw+'vw'}, 1000);
             mn_index = 0;
        }
}

¡Eso es todo! Ahora, si ve su página, debería tener un carrusel de módulos de imagen en el que se puede hacer clic.

Como dije, puede usar este método con casi cualquiera de los módulos de construcción estándar de Divi , pero es posible que deba ajustar la configuración con módulos diseñados para mostrar algún tipo de fuente, como el módulo de blog.

Como el módulo de blog extrae publicaciones y las muestra en varias columnas (cuando se usa la función de cuadrícula), esto requeriría ajustar la configuración del módulo y un poco de CSS adicional.

Carrusel con el módulo de blog

Siga los mismos pasos para configurar su sección y fila.

En lugar de agregar un módulo de imagen, elija el módulo de blog y agregue la clase ds-carousel-module en la pestaña Avanzado de la configuración del módulo.

A continuación, en la pestaña Diseño, elija Cuadrícula en el menú desplegable de diseño.

Puede dejarlo como Ancho completo si lo desea, pero la opción Cuadrícula agrega automáticamente un estilo que se adapta mejor al diseño del carrusel.

Ahora necesitamos ajustar algunas configuraciones en la pestaña Contenido.

Para este primer módulo, necesitamos el Número de publicaciones establecido en 1 y el Número de compensación establecido en 0.

La forma en que ajuste el resto de la configuración y el contenido que muestre depende completamente de usted. Luego Guardar y Salir.

Como hicimos antes, usa la función de clonación de Divi para duplicar el módulo tantas veces como necesites.

Una vez que tenga la cantidad de módulos de blog que necesita, abra cada uno e incremente el número de desplazamiento en 1 cada vez para que cada módulo de blog muestre la siguiente publicación en el feed.

Entonces su configuración se vería así:

1° = Número de compensación: 0

2° = Número de compensación: 1

3° = Número de compensación: 2

4° = Número de compensación: 3

Etc.

Un poco de CSS adicional

Como el módulo de blog se muestra en columnas cuando se usa el formato de cuadrícula, debemos agregar esta consulta de medios adicional a nuestro CSS para anular la configuración de columna de Divi en pantallas más pequeñas:

01
02
03
04
05
06
07
@media all and (max-width: 980px) {
    /*Set post to fullwidth on smaller screens*/
    .ds-carousel-section .et_pb_blog_grid .column.size-1of2 {
        width: 100% !important;
        margin: 0 !important;
    }
}

Si decidió usar el módulo de blog en modo de ancho completo, no necesitará agregarlo.

Resultado

Ahora revise su página y vea su encantador nuevo Carrusel de blogs

Pensamientos finales

Hay tantas formas en las que puedes usar este efecto de carrusel para mostrar más contenido sin aumentar la longitud de tu página.

Puede mostrar una muestra de los diseños de su sitio, testimonios de clientes, biografías de empleados, videos, podcasts o incluso productos de su tienda.

Me encantaría saber cómo usas este tutorial para crear un carrusel de módulos Divi en el que se puede hacer clic, ¡así que deja un comentario en la sección a continuación!

Imagen destacada por aunaauna / Shutterstock.com

Publicaciones relacionadas:

  1. Cómo crear un módulo de persona con biografía al hacer clic
  2. Cómo insertar módulos Divi o filas dentro de otros módulos Divi (sin complemento)
  3. Cómo crear una barra de contactos de Divi Mobile con clic para llamar, correo electrónico, SMS y enlaces de dirección
  4. Uso de los controles de transformación de Divi para crear diseños únicos de módulos de Blurb