Блог

Главная - Вопросы по программированию - Следующая сборка JS Swiper Проблема JS с CSS попутного ветра

Следующая сборка JS Swiper Проблема JS с CSS попутного ветра

#reactjs #build #next.js #tailwind-css #swiper

Вопрос:

Я создал проект с помощью NextJS, CSS Tailwind и Swiper JS.

Когда я запускаю Yarn Dev, я могу успешно отобразить свой слайдер Swiper без каких-либо ошибок

введите описание изображения здесь

Однако, как только я создал проект и запустил его, я столкнулся со сломанным слайдером без навигации, но я все еще могу провести пальцем, но получаю пустой

введите описание изображения здесь

Для воспроизведения просто установите проект NextJS с конфигурацией Tailwind и слайдером Swiper. Создайте файл в папке pages с помощью этого примера кода

 // import Swiper core and required modules
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import Layout from '@modules/Layout'

import { Swiper, SwiperSlide } from 'swiper/react'

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y])

const Slider = () => {
  return (
      <div className='container'>
        <Swiper
          spaceBetween={50}
          slidesPerView={1}
          navigation
          pagination={{ clickable: true }}
          onSwiper={(swiper) => console.log(swiper)}
          onSlideChange={() => console.log('slide change')}
        >
          <SwiperSlide>
            <div className='h-96 w-50 bg-red'>Slide 1</div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='h-96 w-50 bg-blue'>Slide 2</div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='h-96 w-50 bg-orange'>Slide 3</div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='h-96 w-50 bg-green'>Slide 4</div>
          </SwiperSlide>
        </Swiper>
      </div>
  )
}

export default Slider
  • Версия Swiper: 6.5.6.
  • Платформа/Целевая и браузерная версии: CHROME

Комментарии:

1. Как вы используете стили swiper? Вы включаете где-то связанный файл CSS или используете их стили SCSS/Less?

Ответ №1:

Я столкнулся с той же проблемой, используя react-swiper с NextJS. Я предполагаю, что проблема вызвана некоторым встряхиванием дерева во время сборки, которое исключает CSS-файлы компонентов swiper, поскольку они не импортируются в модуль swiper (очень «случайное» предположение здесь, так как мои знания о встряхивании дерева Webpack очень просты).

Тем не менее, я решил проблему, импортировав файлы swiper .less в пользовательский файл .less в моем проекте (поэтому они объединяются и уменьшаются во время сборки), а затем импортировав последний файл .less в файл компонента.

Следуя примеру кода

 /* custom-swiper.less */
@import "~swiper/swiper.less";
@import "~swiper/components/navigation/navigation.less";
@import "~swiper/components/pagination/pagination.less";

/*
 * my swiper style overrides below
 */
...

Ответ №2:

У меня была та же проблема, и я исправил ее с помощью cdn-импорта css в html-элементе head и с помощью swiper/react для импорта я использую react с nextjs, typescript и tailwind

В соответствующем месте — я вставил _document.jsx

        <Head>
          <link
            rel="stylesheet"
            href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
          />          
        </Head>

Использование <Swiper> and <SwiperSlide> 

 import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

// import Swiper core and required modules
import SwiperCore, { Pagination, Navigation } from 'swiper';

// install Swiper modules
SwiperCore.use([Pagination, Navigation]);
Метки: