Skip to content

Gaps between each slider item in latest Safari #542

@jackbarham

Description

@jackbarham

I'm pretty sure it was working on older versions of Safari, but I've recently found a bug where each image (slider/swipe item) is not loading the next image until the previous one is off the screen and causing a gap between images. This happens after 2-3 clicks on the next() slide.

It's tricky to explain so I've recorded a quick screencast to demonstrate: https://www.dropbox.com/s/hwbi16481ygmb16/swipe-safari-issue.mov?dl=0

All other browsers are working fine and wondering if anyone else is having the same issue.

macOS: 10.13.2
Safari: 11.0.2
Swipe: 2.0.0

const slider = document.getElementsByClassName('slider')
for (var i = 0; i < slider.length; i++) {

	const sliderCount = slider[i].dataset.moduleCount
	const prev = document.querySelector('.slider__prev-' + sliderCount)
	const next = document.querySelector('.slider__next-' + sliderCount)
	const swipe = document.querySelector('.swipe-' + sliderCount)

	window.mySwipe = new Swipe(swipe, {
		startSlide: 0,
		speed: parseInt(swipe.dataset.speed),
		auto: parseInt(swipe.dataset.delay),
		draggable: true,
		continuous: true,
		disableScroll: false,
		stopPropagation: false,
		callback: function (index, elem, dir) {},
		transitionEnd: function (index, elem) {}
	})

	prev.onclick = mySwipe.prev
	next.onclick = mySwipe.next

	if (mySwipe.getNumSlides() === 1) {
		prev.classList.add('hide')
		next.classList.add('hide')
	}
}

Any help would be appreciated.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions