JQuery Carousel com slide horizontal e lista vertical (scroll)

[tiagopraz]

Estou vendo este carousel https://bootsnipp.com/snippets/9xGW e estou editando algumas coisas para usar em uma página local em casa, não sou profissional nem trabalho com desenvolvimento de sites mas tenho algum conhecimento sobre. Gostaria de adicionar mais itens na lista vertical, o problema é que quando adiciono  a altura da lista fica maior do que a altura do container do slide que é de 400px. Será que é possível deixar na mesma altura e ao mesmo tempo adicionar um scroll automático? Acontece que quando o item do slide muda o item na lista referente ao slide muda de cor. A lista tem cinco itens, eu limitei o tamanho da lista por css em 400px só que  quando um sexto item é ativado e muda de cor não dá pra ver mesmo se eu colocar

overflow, scroll;

em 

#myCarousel .list-group

Seria interessante se a lista subisse sozinha quando o sexto item fosse ativado e se houvesse controle pelo scroll do mouse também. Poderiam dar um help por favor?

 

[GabrielSennaMs]

@tiagopraz 

 

4 horas atrás, tiagopraz disse:

Será que é possível deixar na mesma altura e ao mesmo tempo adicionar um scroll automático?

 

Sobre a altura basta adicinar um limitador de 100% em relação ao elemento pai do carrossel

overflow-y: scroll; // Fazer o scroll aparecer
max-height: 100%;

 

Sobre o focu do scroll é bem simples. Para fazer isso basta setar o scrol da lista do carousel de acordo com a altura que o elemento ativado se encontra em relação com a altura da lista.

$('.list-group').animate({ scrollTop: $('.list-group').scrollTop() + $('.list-group').find("li.active").position().top }, 400);

 

Fiz esse exemplo bem rápido, usando o carrossel que você está usando.

 

https://codepen.io/morto/pen/ExVmyRa

 

Espero que ajude!

[tiagopraz]

@GabrielSennaMs Muito obrigado. me ajudou muito!


 

Em 26/04/2020 às 03:31, GabrielSennaMs disse:

@tiagopraz 

 

 

Sobre a altura basta adicinar um limitador de 100% em relação ao elemento pai do carrossel

overflow-y: scroll; // Fazer o scroll aparecer
max-height: 100%;

 

Sobre o focu do scroll é bem simples. Para fazer isso basta setar o scrol da lista do carousel de acordo com a altura que o elemento ativado se encontra em relação com a altura da lista.

$('.list-group').animate({ scrollTop: $('.list-group').scrollTop() + $('.list-group').find("li.active").position().top }, 400);

 

Fiz esse exemplo bem rápido, usando o carrossel que você está usando.

 

https://codepen.io/morto/pen/ExVmyRa

 

Espero que ajude!