Criando um Efeito Opacidade “opacity” em sliders criados com Elementor

Basta adaptar o código para outros tipos de sliders, a lógica é a mesma:

selector .swiper-wrapper {
    transition-timing-function: linear;
}

selector .swiper {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent 0%, /* Borda esquerda opaca */
        rgba(0, 0, 0, 1) 20%, /* Centro visível */
        rgba(0, 0, 0, 1) 80%, /* Centro visível */
        transparent 100% /* Borda direita opaca */
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 1) 20%,
        rgba(0, 0, 0, 1) 80%,
        transparent 100%
    );
}

selector .swiper-slide {
    opacity: 1; /* Todos os slides visíveis */
}

Agora somente o card à esquerda some:

selector .swiper-wrapper {
    transition-timing-function: linear;
}

selector .swiper {
    position: relative;
    overflow: hidden;
}

selector .swiper-slide {
    opacity: 1; /* Todos os slides visíveis por padrão */
    transition: opacity 0.3s ease; /* Transição suave */
}

selector .swiper-slide-prev {
    opacity: 0; /* Apenas slides anteriores (à esquerda do ativo) 100% opacos */
}

selector .swiper-slide-active,
selector .swiper-slide-next,
selector .swiper-slide:not(.swiper-slide-prev):not(.swiper-slide-active) {
    opacity: 1; /* Slide ativo, próximo e futuros visíveis */
}

/* Opcional: Máscara no container para reforçar o efeito na borda esquerda */
selector .swiper {
    mask-image: linear-gradient(
        to right,
        transparent 0%, /* Borda esquerda opaca */
        rgba(0, 0, 0, 1) 20%, /* Início da área visível */
        rgba(0, 0, 0, 1) 100% /* Mantém visível até o final à direita */
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 1) 20%,
        rgba(0, 0, 0, 1) 100%
    );
}