How to adapt this code to different screens

Asked

Viewed 97 times

0

I’m having a problem using a slider vertical, the Swiper Slider I’m using the Mousewheel control. My problem is this, how he’s a vertical slider, need to set a size for the height, so I can’t make it responsive.

Example:

Below is the css file where I set the size of container which will include 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’ve set the size of height in 900px, of course on smaller screens it will continue with 900px, I need him to fit the size of the screen, this I can solve with media-queries, but I have one more problem, look at the script that performs the initialization of the slider: The option slidesPerView, sets 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 it on the flash drive because if not the post would be too long.

Any idea how to fix it? I’m also accepting indications of some vertical slider best.

I’m using materialize as a css framework.

jquery html5 css3 responsive-layout media-queries

  • Hello, On the part of decrease or increase the number of images, what will be the rules?

  • So, my idea would be that when the screen size is less than 600px, there are 2 images, between 600 and 1024 4 images and bigger than that 5 images.

  • I hid the advertising. What do you want? https://jsfiddle.net/mrpbLL6a/1/

  • Cool! That’s right. But I ended up using the media-queries. Thanks for the answer! But even so I think I’ll do this way you did, four images on a 320px screen is very hahaha. Thanks!

1 answer

1


To be dynamic the updated function was created.

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 is tasked with indicating the size of the slider and how to indicate how many photos should be viewed.

A Trigger has been created for any change with the window size to call the update function.

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

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

Browser other questions tagged jquery html5 css3 responsive-layout media-queries

You are not signed in. Login or sign up in order to post.