轻度使用swiper.js

问题描述

我正在尝试使用swiper.js，但似乎不起作用，它只是将幻灯片按垂直顺序放在可滚动的div中。我在具有打字稿视图的Vaadin应用程序中使用它，因此基本上环境是打字稿应用程序。

这是代码：

import {css,customElement,html,LitElement,PropertyValues,query} from 'lit-element';
import '@vaadin/vaadin-menu-bar'
import {Swiper} from "swiper/bundle";
import 'swiper/swiper-bundle.css';
@customElement('questionaire')
export class Questionaire extends LitElement {

    @query('#questionaire-container')
    private questionaireContainer!: HTMLdivelement;

    constructor() {
        super();
    }

    static get styles() {
        return [css`
        .swiper-container {
            width: 600px;
            height: 300px;
        }`];
    }

    protected firstUpdated(_changedProperties: PropertyValues) {
        super.firstUpdated(_changedProperties);

        new Swiper(this.questionaireContainer,{
            direction: 'vertical',pagination: {
                el: '.swiper-pagination',},navigation: {
                nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',scrollbar: {
                el: '.swiper-scrollbar',});
    }

    render() {
        return html`
    <div style="width: 600px;height: 600px">
<div id="questionaire-container" class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div></div>`
        ;
    }
}

有什么想法吗？谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）