Os controles deslizantes de carrossel são amplamente adotados em web design por sua capacidade de exibir serviços, imagens, recursos e vários outros conteúdos com eficiência, sem ocupar espaço excessivo. Ao implementar um carrossel, você pode otimizar a utilização do espaço e aprimorar a experiência geral do usuário.
Neste guia, orientarei você no processo de integração da funcionalidade carrossel ao seu site Divi . Aproveitaremos a biblioteca Swiper.js de uma fonte de terceiros e aplicaremos CSS personalizado para adaptar o controle deslizante às suas preferências.
Para incorporar a funcionalidade do controle deslizante em seu site Divi, basta invocar a biblioteca swiper.js no arquivo functions.php do seu tema filho.
Projete um controle deslizante de carrossel sem um plug-in
Para habilitar a funcionalidade do nosso controle deslizante, devemos incluir a biblioteca swiper.js no arquivo functions.php do nosso tema filho Divi.
Create Amazing Websites
Com o melhor criador de páginas gratuito Elementor
Comece agoraAlém disso, precisamos inserir o código de configuração especificando parâmetros como o número de colunas a serem exibidas no controle deslizante, se os slides devem ser repetidos e se a navegação por seta e a paginação devem ser habilitadas, entre outras configurações.
Para obter uma lista abrangente de configurações disponíveis, consulte a página da API Swiper . Agora, vamos mergulhar na implementação.
Todo o código PHP deve ser incorporado ao arquivo functions.php do tema filho Divi. Você pode fazer edições neste arquivo através do FTP, do Gerenciador de Arquivos do seu servidor ou usando o Editor de Temas acessível no Painel do WordPress. Neste caso, prosseguiremos com o Editor de Temas.
Para enfileirar a biblioteca swiper.js em nosso tema filho, siga estas etapas:
- Navegue até Aparência → Editor de Tema
- Abra o arquivo functions.php em seu tema filho e adicione o 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'); - Selecione Atualizar arquivo.
Agora devemos usar o Divi Builder para criar todas as coisas que serão exibidas em nosso controle deslizante. Classes e IDs personalizados de linha, coluna e módulo precisarão ser adicionados. Só pode haver um layout de coluna e ele será convertido em um carrossel com base nos números das colunas especificados nas configurações do código PHP.
Utilizei módulos do Blurb com um belo design e efeitos de foco para este exemplo, mas você pode usar qualquer módulo Divi que desejar.
Adicione uma seção com uma linha de coluna à sua página usando o Divi Builder.
Encontre o módulo Blurb e adicione-o à página.
As configurações de linha podem ser acessadas clicando no símbolo de engrenagem na barra de ferramentas verde.
Selecione Classes e ID CSS avançados.
Inclua dp-carousel no campo Classe CSS.
Mudar para a guia Conteúdo
Abra as configurações da coluna e adicione a classe swiper-wrapper ao campo Classe CSS.
Para personalizar o módulo de sinopse, abra as configurações do módulo e a navegação na guia Avançar. Em seguida, adicione swiper-slide ao campo CSS.
Navegue até a guia Conteúdo e clique no botão Texto.
Inclua título e corpo do texto.
Adicione uma imagem de fundo na alternância de plano de fundo.
Agora, para o design do texto do título, aqui estão as configurações -
- Fonte do título – Abhaya Libre
- Cor – #415962
- Tamanho do texto do título – 26px e 22px em celulares
Para o corpo do texto, siga estas configurações.
- Fonte do título – Open Sans
- Cor – #879296
- Tamanho do corpo do texto – 14px e 12px em celulares
- Altura da linha do corpo: 1,5em
Nesta etapa final, adicionaremos um espaçamento Blurb e CSS personalizado para dar ao contêiner de conteúdo um fundo branco e uma animação de zoom na imagem de fundo.
Alterne o espaçamento do design nas configurações do Blurb.
- Preenchimento para desktops deve ser adicionado. 300px/1,5vw/1,5vw/1,5vw
- Deve ser adicionado preenchimento para tablets. 220 px/30 px/30 px/30 px
- Deve ser adicionado preenchimento para celulares. 200 px/20 px/20 px/20 px
Navegue até a guia Avançado e marque a caixa de seleção CSS personalizado.
Tamanho do fundo: 100%.
Transição em segundo plano para o campo Elemento Principal.
Todas as transições são 0,5s.
Ao passar o mouse, adicione um tamanho de plano de fundo e faça a transição para o elemento principal.
Tamanho de fundo de 105%; Todas as transições são 0,5s.
Para a cor de fundo, cole no campo CSS personalizado.
background-color: white;
padding: 30px 1.5vw;Além disso, você precisa adicionar cor de fundo e preenchimento ao campo Conteúdo do Blurb ao passar o mouse.
background-color: white;
padding: 30px 4vw;
Agora que concluímos o módulo Blurb, podemos replicá-lo quantas vezes quisermos para adicionar novas sinopses ao nosso carrossel. Você só precisa substituir as palavras e alterar a imagem de fundo em cada módulo copiado.
Nosso controle deslizante está quase pronto. Por fim, adicionaremos CSS personalizado para decorar a navegação e paginação do controle deslizante. Este código pode ser colocado em Divi/Theme Options/Custom CSS ou no arquivo style.css do seu tema filho.
/* 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;
}
Agora aqui está o slide final.
Palavras Finais
Criar um carrossel no Divi sem usar um plugin envolve aproveitar a funcionalidade integrada e as opções de personalização fornecidas pelo tema Divi. Seguindo este procedimento, você pode criar um carrossel adaptado ao seu conteúdo específico e preferências de design sem depender de plug-ins adicionais.
