How can I use swiperjs inside qwik?

Question

I'm trying to use swiper js inside my qwik project. Qwik that belongs to builder.io.

The component gets loaded and the UI is shown. But the behavior is not applied on it.

This is my code. But it does not work:

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

It shows all of the testimonials (slides) and it does not apply the swiper on it.

Answer 1

useClientEffect$ solves your problem. Put the Swiper's initialization code into it.

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

useStyles$ may be needed to make Swiper's css to work properly.

import swiperStyles from 'swiper/css'

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