Swiper - кнопки Next и prev не работают - PullRequest
Новая
       8

Swiper - кнопки Next и prev не работают

0 голосов
/ 06 октября 2019

Я пытаюсь отобразить горизонтальную временную шкалу на моей 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',
        });
    }
})

1 Ответ

0 голосов
/ 06 октября 2019

Переставил несколько скриптов. Внесены некоторые изменения в конфигурацию 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>
...