Swiper draggable scrollbar无法在firefox中运行

Question

我有一个使用swiper的旋转木马，它具有可拖动的滚动条功能。这适用于chrome，Internet Explorer和microsoft edge。它虽然在Firefox中不起作用。如果单击滚动条并拖动，则不会发生任何事情。

我不确定我的代码中是否有某些内容阻止了这一点，或者它是否是一个firefox错误，或者是否有任何类型的解决方法？

你可以在这里看到 -

http://psc.website.2018.360southclients.net:8080/index.php?#scroll

该链接将直接转到滚动条，该网站仍在开发中。

这是HTML

<div class="row events">
        <div class="col-md-12 fixed-width">
            <div class="row">
                <div class="col-md-4 text-right">
                    <h2>Upcoming<br /> Events</h2>
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-7"></div>
            </div>
        </div>

        <div class="events-holder">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">31 Mar</p>
                            <h3>Public lecture by Victor Edmund</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">21 Jun</p>
                            <h3>Weekend Workshop</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">10 Jul</p>
                            <h3>Public lecture by Victor Edmund</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">31 Aug</p>
                            <h3>Public lecture by Victor Edmund</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">21 Sep</p>
                            <h3>Weekend Workshop</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">10 Nov</p>
                            <h3>Public lecture by Victor Edmund</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">21 Sep</p>
                            <h3>Weekend Workshop</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">10 Nov</p>
                            <h3>Public lecture by Victor Edmund</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">21 Sep</p>
                            <h3>Weekend Workshop</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">10 Nov</p>
                            <h3>Public lecture by Victor Edmund</h3>
                        </a>
                    </div>
                </div>
            </div>
            <div class="row pagination-holder">
                <div class="col-md-3 text-right">Today</div>
                <div class="col-md-6">
                    <div class="swiper-scrollbar"></div>
                </div>
                <div class="col-md-3 text-left">Upcoming</div>
            </div>
        </div>
    </div>

CSS：

section.info-station .events-holder{margin-top:60px;padding-bottom:100px}
section.info-station .events-holder .swiper-container{width:100%;height:auto;z-index:250}
section.info-station .events-holder .swiper-container .swiper-wrapper{left:calc(20% - 14px)}
section.info-station .events-holder .swiper-container .swiper-wrapper::after{content:'';display:block;clear:both}

section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide{width:20%;background:#1d2f35;margin:0 30px 30px 0;overflow:hidden;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide .image{width:100%;height:auto;display:block;opacity:.25;overflow:hidden;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide .image img{width:100%;height:auto}

section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide .text{position:absolute;width:100%;height:auto;bottom:0;padding:30px}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide .text .date{font-family:'UniformBold-Regular';font-weight:300;font-size:19px;text-transform:uppercase;color:#ef4244}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide .text h3{font-size:32px;text-transform:none;color:#fff;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide .text h3{color:#fff}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide:hover .text h3{color:#ef4244}

section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide-active{-webkit-border-bottom-right-radius:55px;-moz-border-radius-bottomright:55px;border-bottom-right-radius:55px;-webkit-box-shadow:0 0 30px 0 rgba(0,0,0,.25);-moz-box-shadow:0 0 30px 0 rgba(0,0,0,.25);box-shadow:0 0 30px 0 rgba(0,0,0,.25)}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide-active .image{opacity:1}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide-active .text{padding:30px 50px 30px 30px}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide-active .text h3{font-size:50px}

section.info-station .events-holder .pagination-holder{position:relative;font-family:'UniformBold-Regular';font-weight:300;font-size:19px;text-transform:uppercase;color:#1d2f35;margin-top:30px}
section.info-station .events-holder .pagination-holder .swiper-scrollbar{width:calc(100% - 30px);height:24px;margin:0 15px;background:none}
section.info-station .events-holder .pagination-holder .swiper-scrollbar::before{content:'';position:absolute;top:50%;left:0;width:100%;height:2px;background:#1d2f35}
section.info-station .events-holder .pagination-holder .swiper-scrollbar .swiper-scrollbar-drag{background:#ef4244;border-radius:0;height:10px;top:8px}

jquery：

var calcWidth = ($('body').width() * 0.2 - 24);
    var swiperEvents = new Swiper('.events-holder .swiper-container',{
        width:calcWidth,
        slidesPerView:1,
        scrollbar:{
            el:'.events-holder .swiper-scrollbar',
            snapOnRelease:true,
            draggable:true
        }
    });

我使用的是Swiper 4.1.0。

非常感谢任何帮助！

Answer 1

我找到了一个解决方法..我不得不从swiper中找出以下内容：

override func viewDidLoad() {
    super.viewDidLoad()

    currentGoalTextField.text = goalText
}