Accessing translate and progress values.

[kilianso]

First of all, I am so happy that I found this repo! Finally a real alternative to Swiper, where even just the core module is huge. Great work!

What I would need to replace Swiper with tiny-swiper in all of my projects is a way to work with the current translate values. Especially during dragging / mousemove. This would make it possible, to build custom parallax effects, progress indicators and more.

Do you have any tips to achieve this with tiny-swiper?

See:
Swiper parallax example
Swiper progress pagination Example
Swiper methods
Swiper watchSlidesProgress events

[joe223]

Thanks for the feedback!

Unfortunately we can not get the precise progress during dragging / mousemoving on tiny-swiper@1.x. But there is an alternative way to get progress after slide action is end.

swiper.on('after-slide', newIndex => {
  const progress = newIndex / swiper.maxIndex;
  // TODO:
})

Check this example https://stackblitz.com/edit/swiper-demo-35-parallax-jmnfwt?file=index.js

I am writing a new version 2 which would be more scalable and functional. It will provides progress APIs (include dragging/mousemove), loop, free mode and supports custom render. But the core module may grows to 3kb~4kb after gziped. This is the trade-offs between package size and practicability. And it will be released on April 1st.

I will be glad to receive more comments and suggestions. 😃

[kilianso]

Oh nice, looking forward to V2! And thank you for the demo 🙌

[kilianso]

Two more things:

1. How would you handle resize events with tiny-swiper? The update method seems not to work. A tiny example would be perfect!

2. And what about a fade effect instead of sliding? On very large screens, you usually don't want to slide across the entire screen.

I can open a new issue for these questions, but it might be unnecessary. Thanks for your effort!

[joe223]

Hi @kilianso ,

1. How would you handle resize events with tiny-swiper? The update method seems not to work. A tiny example would be perfect!

Here is the example to resize swiper:

window.addEventListener('resize', () => {
  // TODO：debounce or something else
  swiper.update()
})

Check it out https://stackblitz.com/edit/tiny-swiper-resize-demo?file=index.js

2. And what about a fade effect instead of sliding? On very large screens, you usually don't want to slide across the entire screen.

Sadly, tiny-swiper not support fade effect (or fade effect plugin) yet. Special effects will come with version 2. I will add fade effect plugin to tiny-swiper@2.x, thanks for your recommends！

[kilianso]

So, how's V2 doing? 😄

[joe223]

@kilianso Hi, 2.0.0-alpha.0 was released.

We can got scroll progress through scroll event.

For example:

var mySwiper = new Swiper('#swiper1', {
    loop: true,
    speed: 300,
    spaceBetween: 100,
    slidesPerView: 2,
    centeredSlides: true,
    initialSlide: 0,
    mousewheel: true
})

mySwiper.on('scroll', state => {
    console.log(state)
    // do something else

})

https://tiny-swiper.joe223.com/docs/api#life-hooks

[kilianso]

Hey @joe223 Great to hear that alpha of V2 has been released. So "scroll" is the distance a slide has been moved right? Any ideas how to achieve a parallax effect with that?