Can someone show me an example of SwiperJs slider, using Vue3 option api, not composition Api?
I mean pure javascript with template inside the html.

like

<div>
  <div slider container>
      <div vfor>
      </div>
  </div>

</div>

CodePudding user response：

You can use something like this:

<template>
  <div
    :id="id"
    
  >
    <div
      
      @click="$emit('click')"
    >
      <!-- swipe right template -->
      <template v-if="direction === 'right'">
        <v-list-item  />
        <v-list-item >
          <v-list-item-content>
            <slot />
          </v-list-item-content>
        </v-list-item>
      </template>

      <!-- swipe left template -->
      <template v-if="direction === 'left'">
        <v-list-item >
          <v-list-item-content>
            <slot />
          </v-list-item-content>
        </v-list-item>
        <v-list-item  />
      </template>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.min.css';
import { Swiper } from 'swiper/dist/js/swiper.esm.js';

export default
{
  props:
  {
    id:
      {
        type: [String, Number],
        required: true
      },
    direction:
    {
      type: String,
      default: 'right',
      validator: value => ['right', 'left'].indexOf(value) !== -1
    }
  },
  mounted () {
    const self = this;
    const el = '#'   this.id;
    const direction = this.direction;

    // Initialize Swiper
    const swiper = new Swiper(el, {
      initialSlide: this.direction === 'left' ? 0 : 1,
      resistanceRatio: 0,
      speed: 150,
      observer: true,
      observeParents: true,
    });

    // Event will be fired after transition
    swiper.on('transitionEnd', function () {
      const activeIndex = this.activeIndex;
      if ((direction === 'right' && activeIndex === 0) || (direction === 'left' && activeIndex === 1)) {
        self.$emit('swiped');
        // Destroy slider instance and detach all events listeners
        this.destroy();
      }
    });
  }
};
</script>

CodePudding user response：

Use can use like this

<template>
 
 <swiper
    :slides-per-view="4"
    :space-between="30"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    
  >
    <swiper-slide v-for="item in items" :key="item">
        <img :src="item" />
    </swiper-slide>
  </swiper>
</template>

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

export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    data() {
        return {
            items: ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg']
        }
    }
}
</script>