Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Navigation does not honor loop mode when using only two slides #66

Open
bediu opened this issue Mar 26, 2021 · 4 comments
Open

Navigation does not honor loop mode when using only two slides #66

bediu opened this issue Mar 26, 2021 · 4 comments
Labels
bug Something isn't working

Comments

@bediu
Copy link

bediu commented Mar 26, 2021

Describe the bug
Navigation does not honor loop mode when using only two slides, it keeps going back and forth.

Expected behavior
Navigation should honor loop mode when using only two slides, and change the slides according to the navigation element clicked [prev, next]

Information

  • Tiny-Swiper Version: lastest
  • OS: linux
  • Browser: chrome 89
  • Reproduce example：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Tiny-Swiper demo - Plugin - Mousewheel</title>
</head>

<body>
  <!-- Tiny-Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png" />
      </div>
      <div class="swiper-slide">
        <img src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png" />
      </div>
    </div>

    <button class="swiper-plugin-navigation-prevEl">
      PREV
    </button>
    <button class="swiper-plugin-navigation-nextEl">
      NEXT
    </button>
  </div>

  <!-- Tiny-Swiper JS -->
  <script src="https://unpkg.com/tiny-swiper@latest/lib/index.min.js"></script>
  <script src="https://unpkg.com/tiny-swiper@latest/lib/modules/navigation.min.js"></script>

  <!-- Initialize Tiny-Swiper -->
  <script>
    var swiper = new Swiper(".swiper-container", {
        loop: true,
      mousewheel: {
        interval: 400
      },
        navigation: {
                nextEl: '.swiper-plugin-navigation-prevEl',
                prevEl: '.swiper-plugin-navigation-nextEl'
         },
      plugins: [SwiperPluginNavigation]
    });
  </script>
</body>

</html>
@bediu
Copy link
Author

bediu commented Mar 26, 2021 •
edited
Loading

Note, for anyone that wants a bad temporary hack, add two extra slides that are the same. One issue was that with this solution I had to implement my own navigation plugin using the after-slide event because four bullet points would show instead of two.

@joe223
Copy link
Owner

joe223 commented Mar 29, 2021

@bediu Would you like to create a fix PR😄?

@bediu
Copy link
Author

bediu commented Mar 29, 2021

@bediu Would you like to create a fix PR?

I can try to fix this but I'm not familiar with the codebase. Can you share some information where do I start?

@joe223
Copy link
Owner

joe223 commented Mar 30, 2021

@bediu Sorry, I'm kinda busy this days so can not reply to you soon.

I thought the problem is caused by getOffsetSteps. This function does not return the right value on line 207, thus swiper can not set initial offset for rebounding animation before sliders move.

tiny-swiper/packages/tiny-swiper/src/core/state/operations.ts

Lines 186 to 222 in a7a95e6

function slideTo (
targetIndex: number,
duration?: number
): void {
const {
measure,
limitation
} = env
const len = limitation.maxIndex - limitation.minIndex + 1
const computedIndex = options.loop
? (targetIndex % len + len) % len
: targetIndex > limitation.maxIndex
? limitation.maxIndex
: targetIndex < limitation.minIndex
? limitation.minIndex
: targetIndex
const newTransform = -computedIndex * measure.boxSize + limitation.base
// Slide to wrapper's boundary while touch end.
// Math.abs(excess) ≥ 0
// Old condition: state.index === computedIndex
if (getOffsetSteps(newTransform - state.transforms) !== 0
&& options.loop
) {
const excess = getExcess(state.transforms, limitation)
const defaultWay = computedIndex - state.index
const shortcut = getShortestWay(
state.index,
computedIndex,
limitation,
defaultWay
)
if (shortcut !== defaultWay && !excess) {
transform(shortcut < 0
? limitation.min - measure.boxSize
: limitation.max + measure.boxSize)

@joe223 joe223 added the bug Something isn't working label Mar 30, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@joe223 @bediu