Skip to main content

Boa tarde!

Estou com um problema ao utilizar um sliderslider vertical, o Swiper Slider (http://idangero.us/swiper/demos/Swiper Slider) estou utilizando o MouseWheel controlMouseWheel control. Meu problema é o seguinte, como ele é um slider verticalslider vertical, preciso definir um tamanho para o heightheight, então, não consigo deixá-lo responsivo, por exemplo.

Exemplo:

Abaixo encontra-se o arquivo css onde defino o tamanho do containercontainer que irá comportar os elementos do sliderslider.

Como podem ver, defini o tamanho do heightheight em 900px900px, é claro que em telas menores ele continuará com 900px900px, preciso que ele se adeque ao tamanho da tela, certo, isto posso resolver com media-queriesmedia-queries, porém, tenho mais um problema, vejam o scriptscript que efetua a inicialização do sliderslider: A opção slidesPerViewslidesPerView, define quantos slides aparecerão na tela por vez, se eu diminuir o heightheight, continuarão aparecendo 4 slides :/

O htmlhtml coloquei no pen pqporque se não o postpost ficaria muito extenso. HTML: http://codepen.io/fredddd/pen/XdBZbQ

Alguma ideia de como resolver? Também estou aceitando indicações de algum vertical slidervertical slider melhor.

Ahh, estou utilizando o materialize como framework css.Estou utilizando o materialize como framework css.

Boa tarde!

Estou com um problema ao utilizar um slider vertical, o Swiper Slider (http://idangero.us/swiper/demos/) 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, por exemplo:

Abaixo encontra-se o arquivo css onde defino o tamanho do container que irá comportar os elementos do slider.

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, certo, 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 :/

O html coloquei no pen pq se não o post ficaria muito extenso. HTML: http://codepen.io/fredddd/pen/XdBZbQ

Alguma ideia de como resolver? Também estou aceitando indicações de algum vertical slider melhor.

Ahh, estou utilizando o materialize como framework css.

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.

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 :/

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.

.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; }

.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;
}
$(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 }) });
$(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 prqpq se não o post ficaria muito extenso. HTML: http://codepen.io/fredddd/pen/XdBZbQ

.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; }

$(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 prq se não o post ficaria muito extenso. HTML: http://codepen.io/fredddd/pen/XdBZbQ

.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;
}
$(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 pq se não o post ficaria muito extenso. HTML: http://codepen.io/fredddd/pen/XdBZbQ

Fonte Link
Fred
  • 536
  • 4
  • 25

Como adaptar esse código para telas diferentes

Boa tarde!

Estou com um problema ao utilizar um slider vertical, o Swiper Slider (http://idangero.us/swiper/demos/) 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, por 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, certo, 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 prq se não o post ficaria muito extenso. HTML: http://codepen.io/fredddd/pen/XdBZbQ

Alguma ideia de como resolver? Também estou aceitando indicações de algum vertical slider melhor.

Ahh, estou utilizando o materialize como framework css.