javascript - Swiper - 下一个和上一个按钮不起作用
问题描述
我正在尝试在我的 HTML 页面上显示水平时间线。我的滑动滑块有问题,下一个和上一个按钮根本不起作用,我也包含了库,仍然不起作用,我不明白为什么。控制台中没有显示错误,按钮是可点击的,但根本不起作用。我该如何解决?下面是代码
<div id="app" class="container">
<div class="row">
<div class="col-md-12">
<div class="swiper-container">
<p class="swiper-control">
<button type="button" class="btn btn-default btn-sm prev-slide">Prev</button>
<button type="button" class="btn btn-default btn-sm next-slide">Next</button>
</p>
<div class="swiper-wrapper timeline">
<div class="swiper-slide" v-for="item in steps">
<div class="timestamp">
<span class="date">{{item.dateLabel}}<span>
</div>
<div class="status">
<span>{{item.title}}</span>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script>
const data = [{
dateLabel: 'January 2017',
title: 'Gathering Information'
},
{
dateLabel: 'February 2017',
title: 'Planning'
},
{
dateLabel: 'March 2017',
title: 'Design'
},
{
dateLabel: 'April 2017',
title: 'Content Writing and Assembly'
},
{
dateLabel: 'May 2017',
title: 'Coding'
},
{
dateLabel: 'June 2017',
title: 'Testing, Review & Launch'
},
{
dateLabel: 'July 2017',
title: 'Maintenance'
}
];
new Vue({
el: '#app',
data: {
steps: data,
},
mounted() {
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
paginationClickable: true,
grabCursor: true,
paginationClickable: true,
nextButton: '.next-slide',
prevButton: '.prev-slide',
});
}
})
解决方案
重新排列了一些脚本。对 Swiper 配置进行了一些更改。请看这有帮助!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
<body>
<div id="app" class="container">
<div class="row">
<div class="col-md-12">
<div class="swiper-container">
<p class="swiper-control">
<button type="button" class="btn btn-default btn-sm prev-slide">Prev</button>
<button type="button" class="btn btn-default btn-sm next-slide">Next</button>
</p>
<div class="swiper-wrapper timeline">
<div class="swiper-slide" v-for="item in steps">
<div class="timestamp">
<span class="date">{{item.dateLabel}}<span>
</div>
<div class="status">
<span>{{item.title}}</span>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"
integrity="sha256-4sETKhh3aSyi6NRiA+qunPaTawqSMDQca/xLWu27Hg4="
crossorigin="anonymous"
></script>
<script>
const data = [
{
dateLabel: "January 2017",
title: "Gathering Information"
},
{
dateLabel: "February 2017",
title: "Planning"
},
{
dateLabel: "March 2017",
title: "Design"
},
{
dateLabel: "April 2017",
title: "Content Writing and Assembly"
},
{
dateLabel: "May 2017",
title: "Coding"
},
{
dateLabel: "June 2017",
title: "Testing, Review & Launch"
},
{
dateLabel: "July 2017",
title: "Maintenance"
}
];
new Vue({
el: "#app",
data: {
steps: data
},
mounted() {
var swiper = new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".next-slide",
prevEl: ".prev-slide"
}
});
}
});
</script>
</body>
</html>
推荐阅读
- regex - 带有一些例外的正则表达式匹配模式
- django - 使用 gevent 执行池的 celery 任务的 SynchronousOnlyOperation
- domain-driven-design - 事件溯源 - 如何聚合
- javascript - ONNX.js 中的 Pytorch LSTM - 未捕获(承诺中)错误:节点无法识别的输入“”:LSTM_4
- python - 如何迭代作为函数参数传递的列表?
- python - 如何在 Django Rest Framework 中获取单个项目
- java - 使用 sam stevens totp - 无法正常工作
- angular - 为什么我在编辑 HTML 模板后在 Angular 11 中收到错误 NG6001
- javascript - 使用 AJAX 在 Flask 和 JS 之间发送数据以进行 chrome 扩展
- javascript - 如何从 gist 脚本创建语言选择包装器?