Swiper-下一个和上一个按钮不起作用

问题描述 投票：0回答：1

我正在尝试在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/[email protected]"></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',
        });
    }
})

javascript html css swiper
1个回答
0
投票

重新排列了一些脚本。对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/[email protected]"></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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.