Remove a slide from a swiper by class

Question

Remove a slide from a swiper by class

Navigation

#1 by (0 votes)

0

I have the following swiper:

var swiperBanner = new Swiper('.swiper-container-banner', {
    slidesPerView: 1,
    speed: 1200,
    loop: true,
    grabCursor: true,
    freeMode: false,
    preventClicks: true,
    autoplay: {
        delay: 5000
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    }
});

In the slide images I have some with the class 'mobile' and other 'desktop', I would like to remove mobile slides on larger screens, and desktop on smaller screens, but I'm not finding a way, more did not work

javascript jquery html5 css

asked by anonymous 31.12.2017 / 22:26

1 answer

How to improve performance of ajax update? JSF How to work with Angular PrimeNg's SlideBar?

score 0 · Answer 1

You can use CSS @media screen to define a rule for what you consider to be mobile and desktop screen. In the example below, I define desktop desktop from 480px , so in this rule, screens considered mobile will be 0px to 479px . Then just switch between display: none and display: block in classes:

<style>
@media screen and (min-width: 480px) {
   .desktop{
      display: block;
   }
   .mobile{
      display: none;
   }
}

@media screen and (max-width: 479px) {
   .desktop{
      display: none;
   }
   .mobile{
      display: block;
   }
}
</style>