Hello! Could someone help to find out how to make vue swiper work only at mobile screen?

Question

I have to make vue slider(swiper) work only at mobile screen and destroy it at computer screen.

I would appreciate if someone help me to resolve it.

Here is my vue code below.

<template>
  <section>
    <Swiper>
      <SwiperSlide>
        Slide_1
      </SwiperSlide>
      <SwiperSlide>
        Slide_2
      </SwiperSlide>
      <SwiperSlide>
        Slide_3
      </SwiperSlide>
      <SwiperSlide>
        Slide_4
      </SwiperSlide>
      <SwiperSlide>
        Slide_5
      </SwiperSlide>
    </Swiper>
  </section>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';

import 'swiper/swiper.scss';
import 'swiper/modules/navigation/navigation.scss';
import 'swiper/modules/pagination/pagination.scss'; 

export default {
  name: "VueSwiperCarousel",
  data:{
    return {

    }
  },
  components: {
    Swiper,
    SwiperSlide
  }

</script>

score 0 · Answer 1 · answered Mar 08 '22 at 11:33

There is a couple of ways to do so. I assume the simplest one is to hide your swiper on bigger screens using css media queries.

<template>
  ...
  <Swiper class="swiper">...</Swiper>
  ...
</template>

<style>
@media only screen and (min-width: 480px) {
  .swiper {
    dispay: none
  }
}
</style>

Probably a more performant solution is to detect viewport width in js (check out this question)

Hello! Could someone help to find out how to make vue swiper work only at mobile screen?

1 Answers1