Как запустить Swiper на Nuxt (Vue) без компонента под Vue?

Для запуска Swiper на Nuxt (Vue) без использования компонента под Vue, вы можете использовать JavaScript-подход напрямую в вашем <script> блоке в файле компонента Nuxt.

Начните с установки Swiper и его зависимостей. Вам понадобится установить пакеты swiper и dom7 с помощью npm или yarn:

npm install swiper dom7

После установки вы сможете импортировать Swiper и его стили в ваш файл компонента:

import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'

Затем вы можете создать и инициализировать слайдер в блоке mounted вашего компонента:

mounted() {
  // Создание и инициализация слайдера
  const swiper = new Swiper('.swiper-container', {
    // Параметры Swiper здесь
  })
}

Обратите внимание, что в приведенном коде мы предполагаем, что у вас есть элемент с классом .swiper-container на вашем шаблоне Nuxt, который будет использоваться для создания слайдера. Если у вас нет такого элемента, вам нужно добавить его на ваш шаблон.

Теперь вы можете настроить свою конфигурацию Swiper, добавив нужные параметры в объект, переданный как второй аргумент при создании Swiper. Вы можете использовать все доступные параметры Swiper, чтобы настроить его поведение и внешний вид. Например, чтобы создать горизонтальный слайдер с кнопками навигации, вы можете добавить следующие опции:

const swiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})

В приведенном коде кнопки навигации будут искать элементы с классами .swiper-button-next и .swiper-button-prev для управления слайдером. Вы также можете настроить множество других параметров Swiper, которые позволяют настроить пагинацию, автосмену слайдов, скорость анимации и многое другое.

Наконец, не забудьте очистить слайдер при размонтировании компонента, чтобы избежать утечек памяти:

beforeDestroy() {
  // Уничтожение слайдера
  if (swiper) {
    swiper.destroy()
  }
}

Вот весь код вместе:

<template>
  <div class="swiper-container">
    <!-- Содержимое слайдов здесь -->
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'

export default {
  mounted() {
    // Создание и инициализация слайдера
    const swiper = new Swiper('.swiper-container', {
      // Параметры Swiper здесь
    })
  },
  beforeDestroy() {
    // Уничтожение слайдера
    if (swiper) {
      swiper.destroy()
    }
  }
}
</script>

Теперь вы можете запустить Swiper на Nuxt (Vue) без использования компонента под Vue, используя JavaScript-подход в вашем файле компонента Nuxt.