Carrossel de Cards com Texto Sobreposto

Créditos do código: Make Dream Website

Script de CSS para formatar o card:

				
					selector{
    --radius: 25px;
    --height: 550px;
    --overlay: 0.75;
}

selector .swiper-slide{
    display: flex;
    align-items: flex-end;
    border-radius: var(--radius);
    height: var(--height);
}
selector .swiper-slide:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0,0,0);
    background: linear-gradient(20deg, rgba(0,0,0,var(--overlay)) 0%, rgba(0,0,0,0) 100%);
    height: 100%;
    width: 100%;
    z-index: 1;
    
}
selector .elementor-testimonial__footer{
    display: block;
}
selector img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
}
selector .elementor-testimonial__cite{
    z-index: 2;
    position: relative;
}
selector .elementor-testimonial__name{
    margin-bottom: 10px;
}
selector .elementor-swiper-button-prev,
selector .elementor-swiper-button-next{
    display: none;
}


@media (max-width: 1024px){
selector{
    --height: 370px;
}
}
@media (max-width: 767px){
selector .elementor-main-swiper{
    width: 100% !important;
}
}
				
			

Código JavaScript para Navegação Direita/Esquerda:

				
					<script data-minify="1" src="https://paginasnapratica.com.br/wp-content/cache/min/1/jquery-3.6.0.min.js?ver=1715441458" defer></script>
<script>window.addEventListener('DOMContentLoaded', function() {
var $ = jQuery
$(document).ready(function(){
    
    $('.card-carousel .card-prev').on('click', function(){
        
        $(this).closest('.card-carousel').find('.elementor-swiper-button-prev').trigger('click')
        $(this).closest('.card-carousel').find('.swiper-container').trigger('mouseleave')
    })
    
    $('.card-carousel .card-next').on('click', function(){
        $(this).closest('.card-carousel').find('.elementor-swiper-button-next').trigger('click')
        $(this).closest('.card-carousel').find('.swiper-container').trigger('mouseleave')
    })
    
    $('.card-carousel .card-prev a, .card-carousel .card-next a').on('click', function(e){
        e.preventDefault()
    })
})
});</script>
				
			

Posts relacionados

Melhore a velocidade de carregamento do seu site WordPress com esses trechos de códigos
Descubra como adicionar códigos CSS no WordPress de forma gratuita apenas com o Elementor na versão gratuita.
Aprenda como criar um cabeçalho fixo no Elementor que desaparece ao rolar para baixo e reaparece ao rolar a página para cima.
Descubra como usar a Inteligência Artificial para criar os layouts dos seus sites e Landing Pages.

Preencha com suas informações