I've got a carousel which is using swiper, and it's draggable scrollbar function. This works fine in chrome, internet explorer and microsoft edge. It isn't working in firefox though. If you click on the scrollbar and drag, nothing happens.
I'm not sure if it's something in my code preventing this, or if it's a firefox bug, or if there's any kind of work around for it?
You can see it here -
http://psc.website.2018.360southclients.net:8080/index.php?#scroll
The link will take you directly to the scrollbar, the site is still in development.
Here's the 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>
The 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}
The 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
}
});
I'm using Swiper 4.1.0.
Any help would be greatly appreciated!
I've found a workaround.. I had to hash out the following from swiper:
swiper.scrollbar.dragEvents = (function dragEvents() {
//if ((swiper.params.simulateTouch === false && !Support.touch)) {
return {
start: 'mousedown',
move: 'mousemove',
end: 'mouseup',
};
//}
return touchEvents;
}());