Swiper: Drag issue, scrollbar not working properly either

Created on 30 Oct 2020  路  10Comments  路  Source: nolimits4web/swiper

This is a (multiple allowed):

  • [x] bug
  • [ ] enhancement
  • [ ] feature-discussion (RFC)
  • Swiper Version: 6.3.5
  • Platform/Target and Browser Versions: Windows 10 / Chrome latest
  • Live Link or JSFiddle/Codepen or website with isssue: https://jsfiddle.net/xa7w2rup/3/

What you did

Added slider, it drags way before and past the content and stays there. Also scroll bar doesn't work

Expected Behavior

Shouldn't allow dragging way before or way after (to the point no content is shown in the slider)

Actual Behavior

Allows dragging before and after the content forever it seems. Scroll bar doesn't work. View the image below:

Example

Most helpful comment

@Braunson
Delete the hidden of following code, may work well.

From

" class="relative mx-auto flex flex-row hidden" :class="{ 'hidden' : ! isLoaded }">

To

" class="relative mx-auto flex flex-row" :class="{ 'hidden' : ! isLoaded }">

All 10 comments

Try to remove centeredSlides: true, (or make it false) on line 13

@vltansky Same issue (making it false or removing it).

@Braunson Change the zoom ratio of the browser and everything will return to normal.

@ygj6 It's not zoomed in? Tried it regardless, same issue. It's happening across multiple users on various computers in various locations.

I can't reproduce it. (latest chrome). Working fine for me without centeredSlides.
https://stackblitz.com/edit/web-platform-c2srbg

@vltansky I've removed centeredSlides on jsfiddle and the issue still persists for me https://jsfiddle.net/Braunson/g4t69faz/ I can confirm it persists for many other users and it seems to happen intermittently as well.

Do you have this bug in stackblitz I've sent too?
https://stackblitz.com/edit/web-platform-c2srbg

@vltansky Yes intermittently. My test method, refresh, drag to right, refresh, drag to right. It'll happen on random refresh's.

@Braunson
Delete the hidden of following code, may work well.

From

" class="relative mx-auto flex flex-row hidden" :class="{ 'hidden' : ! isLoaded }">

To

" class="relative mx-auto flex flex-row" :class="{ 'hidden' : ! isLoaded }">

@ygj6 You may have resolved it. I removed the hidden class and cannot re-create it. I've also swapped hidden for invisible (to hide the content before it renders as it makes the page long and doesn't look great). Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

chansecampbell picture chansecampbell  路  3Comments

magic-77 picture magic-77  路  3Comments

QJan84 picture QJan84  路  3Comments

danielcpereira11 picture danielcpereira11  路  4Comments

RyanGosden picture RyanGosden  路  3Comments