cant get the autoslide function working

[TiesTheunissen]

i've implemented the carousel (thanks for the amezing lib) but i cant get the autoslide working.

for my understanding the autoslide should enable an animation that automatically slides all the items from left to right in an x amount of seconds, and in combination with infinite it should always slide from left to right without ever stopping. is that correct?

if not i would like to add that as an option

[GreenFlag31]

Hi,

Which version are you currently using? From the changelog on npm: Version 0.0.9: Change in the behavior of the auto slide. Auto slide will now occur on drag stop (when the user releases the mouse), and will automatically slide towards the nearest slide based on the set threshold. Auto slide is set to true by default. Before this version, autoslide was triggered on drag move (when the user drags the carousel) which could be a bit surprising in term of UX/UI.

What you mean, if I understand correctly, in an 'autoplay' feature (carousel automatically slides every X seconds (setInterval), with a number of slides => slideToScroll)?

Adding a feature is not a problem, but what matters to me the most is doing it elegantly. Adding an 'autoplay' feature would also mean to add a 'play' button and a 'pause' button which should also fit in the interface. Another library (not maintained) anymore was stopping the autoplay and 'mouseenter' (hover) on the carousel, but this would not be a raisonable option since there is no mouseenter or hover on smaller devices.

Cheers

[TiesTheunissen]

hi GreenFlag31, Thnx for the reply. then i didnt understanded the feature. thnx for clearing that up.

then indeed i would like to request another feature if possible. my usecase is that i want to 'autoplay' option that automaticlly slides from left to right (or infinity) if the option is available. for me i would like to see it that ti would go smoothly without ever stopping. but i can also see that someone would like it to go after 300ms to slide 1 item to the right, then again after 300ms 1 item. for me in my usecase i woule like to see it a smooth behaviour with a steady speed without stopping ever. do you thing that is possible?

[GreenFlag31]

That's something I can think of, but there are technical limitations for a 'steadyplay' (going without user actions to the right, possibly infinitely). This actions has to be performed in Javascript (not a CSS animation), which can cost in performance.

I will try and let you another message if the results are satisfying/elegants.

[TiesTheunissen]

Thank you so much!

[GreenFlag31]

Hi.

I've made first tests, and I think I won't implement a steadyplay carousel due to technical limitations. Problems arise from the fact that the carousel will be autonomously moved (by JS, no user action), which then cause a lack of precision on the indication of slide change.

The refreshing rate is of two per second, to not cause performance problem. The problem is even more visible when autoSlide is disabled and the user stops the steadyplay mechanism just after the refresh function was triggered => the slide number indication will be incorrect. Sure, I could correct everything (current slide, the limit for coloring the bullet point navigation), but the user interface will be impacted (very quick 4/6 going to 3/6, bullets colored and back to default, etc). Which will introduce an inconsistent UI.

In other words, this could work, but only under certains conditions, which is not a consistent solution. However, I think that I will implement an 'autoplay' feature (slide auto change every X seconds), which will be available in the next version update.

Cheers.

[GreenFlag31]

AutoPlay feature has been pushed to npm (v0.1.3).

If you want to test it out: https://www.npmjs.com/package/ngx-carousel-ease?activeTab=readme.

Feel free to give me your feedback.

Cheers.

[TiesTheunissen]

hi GreenFlag31,

thnx for the quick response! i've tested out the feature and here is some feedback:

1. i would like to see an option where the controls are hidden but the feature is playing automaticlly
2. is it an option to instead slide 1 (or multiple) to the right/left to do it with and transformX (javascript) that it always goes each ms 10pixels to the right? or something like that?
3. also when you manually slide it then the autoplay is pauzed. for my case at least this is not wishable.

further it looks amezing! well done

[GreenFlag31]

1. Possible, but if it's the case, how the user is going to be able to start/pause the autoPlay?
2. Some browser (like Chrome) do throttle the setInterval function. The minimum is a 5 ms interval. This comes with huge performance cost (I have a GPU NVIDIA GeForce GTX 1650 that goes to 30% use only for refreshing every 10 ms and executing some necessary logic such as indication of the next slides, creating new slides in infinite mode, etc). This will cause lags or crash on lower devices such as smartphones. And if, as I said earlier, I make a mix of JS and CSS transformation every 500ms, it comes to precision problems and unconsistent UI.
3. Yes, any interaction with the carousel will pause the feature. If it's not the cause, if you drag the carousel, it will automatically slides the carousel, ignoring a user action. User action should be preferable over an automatic action I believe. Or should I refire the function when the user stops dragging the carousel?

Cheers

[TiesTheunissen]

1. for my usecase the user shouldn't. its a auto feature of the side itself. here are some examples that will help i think. https://cube.nl/ or https://moovd.nl/
2. see (1). yeah i agree performance should indeed never be dropped at all. maybe with the links this can give a new idea?
3. yes, i would like it to refire indeed again.

[GreenFlag31]

1. & 3. Okay
2. This is different usecases I think. The first example (first link, end of page) offers no user interaction and no indication of slides number. So it's just a basic (can we call this a carousel?) animated slides show. The second example is more interesting, with a refreshing rate of 1 every 3 seconds. But it's the same story here: it is possible because there is no slide number indication, and a very limited user interaction (no buttons).

If you throttle refreshing rate (and it's necessary for performance reasons) and will inevitably come to precision problem / wrong slide number indication / inconsistant UI. But yes, if a turn off the slide number indication and buttons, it could work, but then it will be inconsistent, because this would mean that some options in the library are not compatible with others.

Both approachs (very high refreshing rate in JS and low refreshing rate with a mix of JS and CSS) are not 100% satisfying. Building a solution is not a problem, but what matters to me the most is a clean and robust solution.

Question: in my library, there is a visibility event attached to the carousel. When the user is not active on the current tab, it will pause the carousel (because I don't want JS to perform unecessary actions if the user is not active on the current tab). Would you be interested at relaunching the carousel again if the user comes back on the tab with the carousel?

[TiesTheunissen]

yes. i would be interested in refiring indeed. and i agree with you to dont have unnecessary JS actions when you're not there to see it.

[GreenFlag31]

Hi.

New version has been published on npm: https://www.npmjs.com/package/ngx-carousel-ease?activeTab=readme

Feel free to give me your feedback.

[TiesTheunissen]

this is perfect for me. thnx!