如何解决轻度使用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 举报,一经查实,本站将立刻删除。