如何仅在移动网格上使用 vue-awesome-swiper 组件

Question

I have two bootstrap cols with content. On a large scale, cols are getting half of the row and on a mobile scale, cols are getting all row width and sitting one above another, like a typical grid. I want to use the vue-awesome-swiper on a mobile scale so that I can swipe columns instead of scrolling down to a bottom col. At the same time, I don't need swiper on a large scale, where columns fit one-row width. How can I rich it? How to use the vue-awesome-swiper component only on a mobile scale and don't use it on large one. Some code to illustrate the case:

<div class="row h-100">
   <div class="col gauche">
      <!-- Some content here -->
   </div>
   <div class="col gauche">
      <!-- Some content here -->
    </div>
</div>

With swiper:

<div class="row h-100">
   <swiper class="swiper">
     <swiper-slide>
       <div class="col gauche">
          <!-- Some content here -->
       </div>
     </swiper-slide>
     <swiper-slide>
       <div class="col gauche">
          <!-- Some content here -->
       </div>
     </swiper-slide>
   </swiper>
</div>

Answer 1

The simple solution to this problem (but not the prettiest), would be to use Bootstrap's display utilities , to define when your slider should show and when your columns should show.

The bad part about this solution is having to define your content twice. Once for the normal columns, and once for the slides.

In the below example i "swap" at the md breakpoint, but you can change this to what fits your needs.

<div class="row d-none d-md-flex">
  <div class="col-md-6" v-for="{ text } in items">
    <column-content :text="text"></column-content>
  </div>
</div>
<div class="row d-md-none">
  <div class="col-12">
    <swiper>
      <swiper-slide v-for="{ text } in items" class="px-2">
        <column-content :text="text"></column-content>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</div>

 Vue.use(VueAwesomeSwiper) Vue.component('column-content', { template: '#column-content', props: ['text'], data() { return { text: '123'} } }) new Vue({ el: '#app', data() { return { items: [ { text: 'Some Text 1' }, { text: 'Some Text 2' }, ] } } })

 <link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/swiper@5.3.6/css/swiper.min.css" rel="stylesheet"/> <script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/swiper@5.3.6/js/swiper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper"></script> <div id="app"> <div class="container"> <div class="row d-none d-md-flex"> <div class="col-md-6" v-for="{ text } in items"> <column-content:text="text"></column-content> </div> </div> <div class="row d-md-none"> <div class="col-12"> <swiper> <swiper-slide v-for="{ text } in items" class="px-2"> <column-content:text="text"></column-content> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </div> </div> </div> <template id="column-content"> <div class="card"> <div class="card-body"> {{ text }} </div> </div> </template>