Remove a slide from a Swiper by class

Question

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 others 'desktop', I would like to remove the mobile slides on larger screens, and the desktop on smaller screens, more I am not finding a way, already tried display: none but it didn’t work

Answer 1

You can use the CSS @media screen to define a rule of what you consider screen mobile and desktop. In the example below, I define screen desktop from 480px, therefore, in this rule, the screens considered mobile evening of 0px to 479px. Then just switch between display: none and display: block in the 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>