我怎样才能在qwik中使用swiperjs呢？

Question

我试图在我的qwik项目中使用swiper。属于builder.io的Qwik。

组件将被加载并显示UI。但这种行为并不适用于它。

这是我的密码。但它不起作用：

import { component$ } from '@builder.io/qwik'
import Swiper from 'swiper'
import 'swiper/css'

const Testimonials = component$(({ section }) => {

    const swiper = new Swiper('.swiper', {
        direction: 'vertical',
        loop: true,

        pagination: {
            el: '.swiper-pagination',
        },

        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })

    return <div className="testimonials py-20 mx-4 sm:mx-16 md:mx-8 lg:mx-10 xl:mx-20 ">
        <div
            className="max-w-screen-xl select-none cursor-grab mx-auto "
        >
            <div class="swiper">
                <div class="swiper-wrapper">
                    {
                        section.items.map(item => <div class="swiper-slide">
                            <div
                                className="pb-10 rounded text-center bg-gray-50 pt-6"
                            >
                                <p className="p-4 pt-2 leading-7 pb-16 italic font-catamaran font-light tracking-wide">{item.summary}</p>
                                <img
                                    className='w-24 h-24 rounded-full m-auto -mt-8 border-[5px] border-white border-b-cta-hover border-l-cta-hover'
                                    src={item.imageUrl}
                                    alt={item.title + ' ' + item.subtitle}
                                />
                                <div className="font-black text-lg mt-6 text-slate-800">{item.title}</div>
                                <div className="text-sm mt-2 text-slate-600 ">{item.subtitle}</div>
                            </div>
                        </div>)
                    }
                </div>
                <div class="swiper-pagination"></div>

                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

                <div class="swiper-scrollbar"></div>
            </div>
        </div>
    </div>
})

export default Testimonials

它显示了所有的推荐信(幻灯片)，它不适用于它的刷卡。

Answer 1

useClientEffect$解决了你的问题。将Swiper的初始化代码放入其中。

const Testimonials = component$(({ section }) => {
  useClientEffect$(() => {
    const swiper = new Swiper('.swiper', { ... })
  })

使用样式$可能是必要的，使斯威伯的css正常工作。

import swiperStyles from 'swiper/css'

const Testimonials = component$(({ section }) => {
  useStyles$(swiperStyles)