Como criar um carrossel clicável de módulos Divi
Publicados: 2017-09-19A postagem de hoje foi enviada por Michelle Nunan da Divi Soup, lar da “Divi Kitchen”, onde ela está constantemente preparando novos e úteis tutoriais e ecursos Divi.
Carrosséis são um recurso popular de sites. Eles permitem que você exiba mais conteúdo sem ocupar espaço extra e também adicionam um elemento de interatividade ao seu site que pode encorajar seus visitantes a se envolverem mais com seu conteúdo.
Existem vários plug-ins excelentes que podem ajudar a exibir seu conteúdo em um carrossel, mas neste post vou mostrar como criar um carrossel clicável de módulos Divi usando apenas CSS e Javascript.
Este efeito pode ser usado com quase qualquer um dos módulos Divi padrão ou combinação de módulos. Vou mostrar a você como criar este carrossel usando o módulo de imagem e, em seguida, com o módulo de blog, pois o processo para isso é um pouco diferente. A partir daí, você deve entender como pode criar seu próprio carrossel com quase qualquer um dos módulos padrão.
Resultado
Isso é o que você deve fazer depois de criar um carrossel com o módulo de blog
Você pode ver uma demonstração ao vivo aqui mostrando o efeito usando vários Módulos Divi Builder.
Então vamos começar.
Adicionar uma nova página
Começaremos criando um carrossel com o módulo de imagem. Adicione uma nova página ou abra uma página à qual deseja adicionar o carrossel.
Adicionar uma nova seção
Adicione uma nova seção padrão à sua página com uma única coluna. Em seguida, abra as configurações da seção e, na guia Avançado, adicione a classe ds-carrossel-section no campo Classe CSS.
Como iremos alterar a forma como a seção e as linhas são exibidas, queremos apenas essas alterações aplicadas ao nosso carrossel, portanto, adicionamos uma classe personalizada para evitar que nosso código afete quaisquer outros elementos em nosso site.
Em seguida, salve e saia da seção.
Agora abra as configurações de linha e na guia Avançado, adicione a classe ds-carrossel-row no campo Classe CSS. Em seguida, salve e saia da linha.
Em seguida, vamos adicionar um módulo de imagem à nossa linha. Clique em Inserir Módulo (s) e selecione o Módulo de Imagem na lista.
Na guia Conteúdo do módulo de imagem, clique em Carregar uma imagem e selecione a imagem desejada na biblioteca de mídia ou carregue uma nova.
Se você quiser que suas imagens abram em uma mesa de luz, selecione esta opção nas configurações.
Alternativamente, você pode adicionar um url para abrir uma nova página quando a imagem for clicada, se desejar.
A última coisa que precisamos fazer com o módulo é adicionar uma classe. Clique na guia Advanced e adicione a classe ds-carousel-module no campo CSS Class. Em seguida, salve e saia do módulo.
Esse é um dos nossos módulos concluídos, mas vamos precisar de mais do que uma única imagem para criar o carrossel. O código que irei fornecer mais tarde neste post exibirá 5 imagens por vez, então vamos precisar de pelo menos 6 imagens para que nossos botões de carrossel tenham algum efeito e deslizem nosso conteúdo.
Usando o recurso de clone do Divi, duplique o módulo de imagem quantas vezes quiser que as imagens sejam exibidas em seu carrossel.
Quando terminar, sua seção deve ficar assim, com os módulos de imagem empilhados em uma única linha.
Você precisará abrir as configurações de cada módulo e trocar suas imagens e a URL, caso tenha adicionado.
Essa é a configuração do conteúdo concluída, agora vamos criar a navegação.
Adicionar uma nova seção
Adicione uma nova seção diretamente abaixo da seção da imagem, desta vez com duas colunas.
Abra as configurações de linha e na guia Avançado adicione a classe ds-arrow-row no campo Classe CSS. Em seguida, salve e saia da linha.
Adicione a navegação
Em seguida, adicione um módulo de texto a cada uma das duas colunas nesta linha.
Agora precisamos criar campos de entrada para atuar como nossos botões de navegação. Abra o módulo de texto na coluna da esquerda e na área de conteúdo, cole o seguinte HTML:
<input id="ds-arrow-left" type="button" value="8">
Em seguida, salve e saia do módulo.
Em seguida, abra o módulo de texto na coluna da direita e cole o seguinte HTML:
<input id="ds-arrow-right" type="button" value="9">
Em seguida, salve e saia do módulo.
Estamos fornecendo a esses campos de entrada IDs exclusivos de ds-arrow-left e ds-arrow-right para que possamos estilizá-los com CSS e direcioná-los com JavaScript para dizer o que queremos que eles façam quando forem clicados.
Os valores de 8 e 9 referem-se às setas duplas para a esquerda e para a direita da família de fontes dos Módulos ET.
É tudo o que precisamos fazer no construtor. Se você verificar o front-end de sua página agora, será apenas uma única coluna de imagens e, em seguida, dois pequenos botões cinza com 8 e 9 e eles não farão nada. Então, vamos para a parte divertida, adicionando nosso código.
Adicione o CSS
Aconselho adicionar o seguinte CSS ao seu tema filho, mas se você não estiver usando um tema filho, pode adicioná-lo a Divi> Opções de tema> Geral> CSS personalizado e clicar em Salvar.
/*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 o CSS para suas necessidades
Pode ser necessário editar algumas das declarações CSS, dependendo de quantos módulos você usa em seu carrossel.
Agora, um pouco de matemática!
Esta declaração define a largura da linha que contém os módulos.
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}Para fazer nossos módulos flutuarem um ao lado do outro, com alguns sentados fora da área visível, precisamos aumentar a largura da linha.
Se estiver exibindo um total de 15 módulos com 5 por página, você terá 3 páginas. Portanto, a largura visível da linha deve ser:
(15/5) x 100 = 300.
Portanto, você precisará alterar os valores de 1000vw para um mínimo de 300vw. (Não importa se você inserir um número maior, pois o JavaScript cuidará de não exibir páginas vazias extras). Portanto, seu CSS ajustado ficaria assim:
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 300vw;
max-width: 300vw;
}Com as consultas de mídia é um pouco diferente. Como o CSS está configurado para exibir 3 imagens por página em telas de 1024 px ou menos, e 1 imagem por página em telas de 479 px ou menos, precisamos ajustar a matemática para refletir isso:
(15/3) x 100 = 500 (para tablets)
(15/1) x 100 = 1500 (para celulares)
Seu CSS ajustado ficaria assim:
@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;
}
}Você pode, se desejar, apenas alterar todos esses valores para uma largura maior do que o número total de módulos que você está usando para simplificar. Portanto, no exemplo acima mencionado, esse valor seria 1500vw ou mais.
Você também pode alterar o número de módulos exibidos por página. Esta declaração CSS é onde você pode ajustar isso.
/*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;
}
O valor de largura de 20vw exibe 5 imagens por página e é apenas uma porcentagem de 100. Portanto, 25vw exibiria 4 imagens por página e 16.66vw exibiria 6 imagens por página e assim por diante.
Você pode fazer o mesmo para as consultas de mídia:
/*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;
}
}Lembre-se de que, se você alterar o número de imagens exibidas por página, também pode ser necessário ajustar o valor da largura da linha discutido anteriormente.
Se você verificar sua página novamente agora, tudo deve estar bem estilizado e parecido com um carrossel, mas para que funcione, precisamos adicionar um pouco de JavaScript.
Adicione o JavaScript
Copie e cole o seguinte código em Divi> Opções de tema> Integrações> Adicione o código ao <head> do seu blog e certifique-se de salvar.
<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 adiciona funcionalidade aos nossos botões, movendo a linha para a esquerda e para a direita ao clicar para exibir os módulos.
Existem algumas áreas que você pode querer editar:
var mn_index = 0; //Starting index var mn_visible = 5; var mn_end_index = 0;
O mn_visible = 5; variável corresponde ao número de módulos exibidos por página na área de trabalho. Portanto, se você alterou isso no CSS conforme mencionado anteriormente, também desejará alterar este valor.
Da mesma forma, esta função ajusta o número de imagens exibidas em tablets e celulares. Portanto, se você alterou isso no CSS, ajuste os valores mn_visible aqui também.
function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}Por fim, temos a velocidade com que o carrossel se move. É definido aqui como 1000. Esta é a velocidade em milissegundos: 1000 milissegundos = 1 segundo.
Você pode ajustar este valor para acelerar ou desacelerar a animação.
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;
}
}É isso! Agora, se você visualizar sua página, deverá ter um carrossel clicável de módulos de imagem.
Como eu disse, você pode usar esse método com quase qualquer um dos módulos construtores Divi padrão, mas pode ser necessário ajustar as configurações com módulos projetados para exibir algum tipo de feed, como o módulo de blog.
À medida que o módulo de blog puxa postagens e as exibe em várias colunas (ao usar o recurso de grade), isso exigiria o ajuste das configurações do módulo e um pouco de CSS extra.
Carrossel usando o módulo de blog
Siga as mesmas etapas para configurar sua seção e linha.
Em vez de adicionar um módulo de imagem, escolha o módulo de blog e adicione a classe ds-carousel-module na guia Advanced das configurações do módulo.
Em seguida, na guia Design, escolha Grade na lista suspensa de layout.
Você pode deixá-lo como Largura total, se desejar, mas a opção Grade adiciona automaticamente um estilo que se ajusta melhor ao layout do carrossel.
Agora precisamos ajustar algumas configurações na guia Conteúdo.
Para este primeiro módulo, precisamos do número de postagens definido como 1 e o número de deslocamento definido como 0.
Como você ajusta o resto das configurações e qual conteúdo você exibe, depende inteiramente de você. Em seguida, salve e saia.
Como fizemos antes, use a funcionalidade de clonagem do Divi para duplicar o módulo quantas vezes você precisar.
Assim que tiver o número de módulos de blog de que precisa, abra cada um e aumente o número de deslocamento em 1 a cada vez, para que cada módulo de blog exiba a próxima postagem no feed.
Portanto, suas configurações seriam assim:
1º = Número de deslocamento: 0
2º = Número de deslocamento: 1
3º = Número de deslocamento: 2
4º = Número de deslocamento: 3
Etc.
Um pouco de CSS extra
Como o módulo de blog é exibido em colunas ao usar o formato de grade, precisamos adicionar esta consulta de mídia extra ao nosso CSS para substituir a configuração de coluna do Divi em telas menores:
@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;
}
}Se você decidiu usar o módulo de blog no modo de largura total, não será necessário adicioná-lo.
Resultado
Agora verifique sua página e veja seu adorável novo carrossel de blogs
Pensamentos finais
Existem muitas maneiras de usar esse efeito de carrossel para exibir mais conteúdo sem aumentar o comprimento de sua página.
Você pode exibir uma vitrine de designs de seu site, depoimentos de clientes, biografias de funcionários, vídeos, podcasts ou até mesmo produtos de sua loja.
Eu adoraria saber como você usa este tutorial para criar um carrossel clicável de módulos Divi, portanto, deixe um comentário na seção abaixo!
Imagem em destaque por aunaauna / Shutterstock.com