How to adapt this code to different screens

Question

How to adapt this code to different screens

Navigation

#1 by (1 votes)

0

I have a problem using a vertical slider , the Swiper Slider I'm using the < in> MouseWheel control . My problem is this, since it's a vertical slider , I need to set a size for height , so I can not make it responsive.

Example:

Below is the css file where I define the size of the container that will contain the elements of 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;
}

As you can see, I set the size of height to 900px , of course, on smaller screens it will continue with 900px , I need it to fit screen size, this can solve with media-queries but I have one more problem, see the script that initializes the slider : The option slidesPerView , defines how many slides will appear on the screen at a time, if I decrease the height , 4 slides will continue to appear: /

$(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
    })        
});

The html I put in the pen because otherwise the post would be too long.

Any ideas how to solve it? I'm also accepting indications of some vertical slider better.

I'm using materialize as a css framework.

jquery html5 css3 layout-responsivo media-queries

asked by anonymous 22.04.2016 / 21:09

1 answer

Error in form, Failed to load page Native app performance is still much higher than the html-based app?

score 1 · Accepted Answer

To be dynamic, the function updates.

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

This function has the task of indicating the size of the slider and how to indicate how many photos should be viewed.

A trigger has been created for if there is any change with the size of the window calling the function updates.

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

The example in jsfiddle .:
jsfiddle.net/mrpbLL6a/1