Swiper 10.2.0 basic use, Vue3

Swiper 10.2.0 Basic User Manual

Installation method

1. Install using npm

npm install swiper --save

2. Use cdn

<script src="//i2.wp.com/cdn.jsdelivr.net/npm/swiper@10/swiper-element-bundle.min.js"></script>

2. How to use

2.1. Use in Vue

<script setup>
import { register } from 'swiper/element/bundle'
register() //Register the swiper component. If the installation method uses cdn, this step is not required, and the above introduction is not required.
const swiperOptions = {
  autoplay: {
    delay: 1000,
    enabled: true
  }
}
const init = () => {
  console.log('1')
}
</script>

<template>
  <main>
    <swiper-container
      class="swiper-container"
      navigation="true"
      ref="mainSwiper"
      pagination="true"
      :autoplay="swiperOptions.autoplay"
      @init="init"
    >
      <swiper-slide v-pre>Slide 1</swiper-slide>
      <swiper-slide v-pre>Slide 2</swiper-slide>
      <swiper-slide v-pre>Slide 3</swiper-slide>
    </swiper-container>
  </main>
</template>

If the following warning appears in the console on the web page, modify vite.config.js to the following

import {<!-- --> fileURLToPath, URL } from 'node:url'

import {<!-- --> defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({<!-- -->
  plugins: [
    vue({<!-- -->
      // Ignore custom element warnings
      template: {<!-- -->
        compilerOptions: {<!-- -->
          isCustomElement: (tag) => tag.startsWith('swiper-')
        }
      }
    }),
    vueJsx()
  ],
  resolve: {<!-- -->
    alias: {<!-- -->
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3. Detailed usage

3.1. swiper-container

3.1.1. swiper-container attribute

slidesPerView: The number of slides displayed by each sliding component, can be a number or ‘auto’, the default is 1.

spaceBetween: The spacing between slides (unit: px), default is 0.

speed: sliding speed (unit: milliseconds), default is 300.

loop: Whether to loop the slideshow, it can be true or false, and the default is false.

cssMode: Whether to use CSS scrolling mode, which can improve performance and compatibility. It can be true or false. The default is false.

direction: sliding direction, can be ‘horizontal’ or ‘vertical’, the default is ‘horizontal’.

effect: sliding effect, which can be ‘slide’, ‘fade’, ‘cube’, ‘coverflow’ or ‘flip’. The default is ‘slide’.

autoplay: whether to automatically play the slide, can be true or false, or an object, including delay (delay time in milliseconds), stopOnLastSlide (whether to stop on the last slide), disableOnInteraction (whether to stop when user interacts) , reverseDirection (whether to play in reverse direction), waitForTransition (whether to wait for the transition to end), pauseOnMouseEnter (whether to pause when the mouse enters), the default is false, endable (whether to enable it).

pagination: whether to display the paginator, can be true or false, or an object, including el (selector of paginator element or HTML element), type (paginator type, can be ‘bullets’, ‘fraction’, ‘progressbar’ or ‘custom’), clickable (whether the paginator is clickable), dynamicBullets (whether the paginator is dynamically resized), dynamicMainBullets (the number of main bullets displayed by the paginator), hideOnClick (whether the paginator is hidden on click), renderBullet (self Define the function for rendering bullets), renderFraction (the function for customizing the rendering score), renderProgressbar (the function for customizing the rendering progress bar), bulletClass (the class name of the bullet element), bulletActiveClass (the class name of the activated bullet element), modifierClass (modify class name prefix), currentClass (class name of the current score element), totalClass (class name of the total score element), hiddenClass (class name of the hidden paginator element), progressbarFillClass (class name of the progress bar filling element), clickableClass ( Parameters such as the class name of the clickable paginator element), lockClass (the class name of the locked paginator element), etc., default to false.

navigation: Whether to display the navigation button, which can be true or false, or an object containing nextEl (selector or HTML element of the next button element), prevEl (selector or HTML element of the previous button element), hideOnClick (navigation button Whether to hide when clicked), disabledClass (the class name of the disabled navigation button element), hiddenClass (the class name of the hidden navigation button element) and other parameters, the default is false.

scrollbar: whether to display the scroll bar, can be true or false, or an object containing el (the selector or HTML element of the scroll bar element), dragSize (the size of the scroll bar drag block, can be a number or ‘auto’), hide (whether the scroll bar is hidden when there is no interaction), draggable (whether the scroll bar dragging block is draggable), snapOnRelease (whether to switch to the nearest slide after releasing the scroll bar dragging block), lockClass (lock the scroll bar dragging block) The class name of the block element), dragClass (the class name of the block element when the scroll bar is dragged during dragging) and other parameters, the default is false.

freeMode: Whether to enable free mode, can be true or false. In free mode, the slide will not snap to the edge, but will continue to slide based on inertia. The default is false.
grid: Whether to enable grid mode, which can be true or false, or an object containing parameters such as fill (fill mode, which can be ‘row’ or ‘column’), rows (number of rows), etc. In grid mode, slides can be laid out in multiple rows and columns. The default is false.

manipulation: Whether to enable dynamic manipulation mode, can be true or false. In dynamic manipulation mode, you can use appendSlide, prependSlide, removeSlide, removeAllSlides and other methods to dynamically add or delete slides. The default is false.

4. Module

4.1 Autoplay

<swiper-container
  class="swiper-container"
  ref="mainSwiper"
  :autoplay="{
    delay: 1000,
    enabled: true
  }"
  :autoplay="swiperOptions.autoplay"
>
     ...
</swiper-container>

4.2. Paginator

<swiper-container
  class="swiper-container"
  ref="mainSwiper"
  :pagination="{
    el: '.swiper-pagination', // The selector or HTML element of the pagination element. If el is not written, the default pagination will be displayed.
    clickable: true
  }"
>
     ...
</swiper-container>
<div class="swiper-pagination" style="border: 1px solid #000"></div> // Custom pagination is usually written outside swiper-container

4.3. Navigation buttons

<swiper-container
  class="swiper-container"
  ref="mainSwiper"
  :navigation="{
    nextEl: '.swiper-button-next', // Selector or HTML element of the next button element
    prevEl: '.swiper-button-prev', // The selector or HTML element of the previous button element. If nextEl and prevEl are not written, the default button will be displayed.
    hideOnClick: true
  }"
>
     ...
</swiper-container>
<div class="swiper-button-next" style="border: 1px solid #000"></div> // Custom buttons are generally written outside swiper-container
<div class="swiper-button-prev" style="border: 1px solid #000"></div> // Custom buttons are generally written outside swiper-container

4.4. Scroll bar

<swiper-container
  class="swiper-container"
  ref="mainSwiper"
  :scrollbar="{
    el: '.swiper-scrollbar', // The selector or HTML element of the scroll bar element. If el is not written, the default scroll bar will be displayed.
    dragSize: 100, // The size of the scroll bar drag block, which can be a number or 'auto'
    draggable: true, // Whether the scroll bar drag block can be dragged
    snapOnRelease: true // Whether to switch to the latest slide after releasing the scroll bar drag block
  }"
>
     ...
</swiper-container>

5. Event

5.1. init

<swiper-container
  class="swiper-container"
  ref="mainSwiper"
  @init="init"
>
     ...
</swiper-container>

<script setup>

const init = () => {
  console.log('1')
}

</script>

5.2. slidechange

<swiper-container
  class="swiper-container"
  ref="mainSwiper"
  @slidechange="slideChange" // Note that the event name here is lowercase
>
     ...
</swiper-container>

<script setup>
import { register } from "swiper/element/bundle"
register()

const slideChange = () => {
  console.log('1')
}

</script>

6. Get swiper instance

<template>
  <swiper-container class="swiper-container" ref="mainSwiper" @init="init" @slidechange="slideChange">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper-container>
</template>

<script setup>
import { register } from "swiper/element/bundle"
import { nextTick, onMounted, ref } from "vue"
register()

const mainSwiper = ref(null)

const init = async function () {
  await nextTick()
  console.log("1", mainSwiper.value)
}
const slideChange = () => {
  console.log("2")
}

onMounted(() => {
  console.log("3", mainSwiper.value)
})
</script>