Como customizar CSS somente para slide ativo no slider-layout? Como criar um slider vertical para slider-layout?

Boa tarde!

São duas dúvidas sobre o mesmo tema (Slider Layout), espero que não tenha problema em colocá-las no mesmo tópico.
Estou hoje com o desafio de migrar uma página de CMS para IO, e, em uma de suas seções, precisei utilizar o Slider Layout, como uma forma de usar somente componentes nativos da VTEX.
Na página CMS (print abaixo), utilizamos o slick para criar dois carrosséis: um de imagens, e outro de opções, à esquerda do print.

1 - As imagens possuem opacity: 0.4, e somente a imagem em destaque que possui opacity: 1. Utilizando a biblioteca do slick, podemos customizar no CSS a classe slick-active, para fazer essa diferenciação.
Existe alguma forma de fazer o mesmo no componente do Slider Layout? Se houvesse algum CSS Handle como o paginationDot--isActive, seria excelente.

2 - No caso do carrossel das opções à esquerda do print, como posso fazer o carrossel vertical? Senti falta de uma propriedade chamada isVertical, por exemplo, que aceite true ou false.

Desde já, muito obrigado!

1 Like

Boa tarde @marcelokenzot !
Sobre o ponto 1, se um CSS Handle resolver o problema, sinta-se a vontade de fazer uma contribuição no repositório que nós revisamos a mudança e fazemos o merge!
Sobre o ponto 2, acredito que não temos solução nativa pra isso, mas caso você va tentar implementar um componente customizado ou abrir um Pull Request adicionando isso no repositório do Slider Layout, eu sugiro fazer uma versão do componente de Slider que seja vertical, e ai no componente SliderLayout receber uma prop isVertical que dependendo do valor renderiza internamente ou o Slider ja existente ou o VerticalSlider