Estou com um problema ao utilizar um slider vertical, o Swiper Slider estou utilizando o MouseWheel control.
Meu problema é o seguinte, como ele é um slider vertical, preciso definir um tamanho para o height
, então não consigo deixá-lo responsivo.
Exemplo:
Abaixo encontra-se o arquivo css onde defino o tamanho do container
que irá comportar os elementos do slider
.
.swiper-container { /*esta classe comporta os slides.*/
width: 100%;
height: 900px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide { /nesta classe encontram-se os compontes do swiper.container.*/
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
Como podem ver, defini o tamanho do height
em 900px
, é claro que em telas menores ele continuará com 900px
, preciso que ele se adeque ao tamanho da tela, isto posso resolver com media-queries
, porém tenho mais um problema, vejam o script que efetua a inicialização do slider:
A opção slidesPerView
, define quantos slides aparecerão na tela por vez, se eu diminuir o height
, continuarão aparecendo 4 slides :/
$(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
pagination: '.swiper-pagination',
direction: 'vertical',
slidesPerView: 4,
paginationClickable: true,
spaceBetween: 30,
mousewheelControl: true
})
});
O html coloquei no pen porque se não o post ficaria muito extenso.
Alguma ideia de como resolver? Também estou aceitando indicações de algum vertical slider melhor.
Estou utilizando o materialize como framework css.