0

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.

4
  • Ola, Na parte de diminuir ou aumentar o numero de imagens, quais vão ser as regras? Commented 22/04/2016 às 20:11
  • Então, minha ideia seria para que quando o tamanho da tela for menor que 600px apareçam umas 2 imagens, entre 600 e 1024 4 imagens e maior que isso 5 imagens.
    – Fred
    Commented 22/04/2016 às 20:44
  • escondi a publicidade. O que pretende é? jsfiddle.net/mrpbLL6a/1 Commented 23/04/2016 às 16:55
  • Legal! Era isso mesmo. Mas acabei resolvendo usando as media-queries mesmo. Obrigado pela resposta! Mas mesmo assim acho que vou fazer dessa forma que você fez, quatro imagens numa tela de 320px é muito hahaha. Valeu!
    – Fred
    Commented 23/04/2016 às 18:39

1 Resposta 1

1

Para ser dinâmico foi criada a função atualiza.

atualiza=function(){
   $('.swiper-container').width($( window ).width());
   $('.swiper-container').height($( window ).height());

   if ($( window ).height()<600){
      mySwiper.slidesPerView=2;
   } else if ($( window ).height()<1024){
      mySwiper.slidesPerView=4;
   } else {
      mySwiper.slidesPerView=5;
   }
};

Essa função tem a tarefa de indicar o tamanho do slider e como indicar quantas fotos deverão ser visualizadas.

Foi criado um trigger para se existir alguma mudança com o tamanho da janela chamar a função atualiza.

$( window ).resize(function() {
   atualiza();
});

O exemplo no jsfiddle.:
jsfiddle.net/mrpbLL6a/1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .