I wanted to ask if there is a way to move the slick slider more naturally like when we drag it, it either goes to the next slide and if not dragged much, it goes back to the previous slide. But I am trying to find a way like if I drag and stop anywhere, the slider should just stop there if it is in between two slides
Related
In this example we have three slides being shown, that's how slick is set to work in this case, but every time I pass it, it doesn't matter where I stop the touch, it goes back to three. But I want it to stop moving when the touch leaves the screen, so if the touch stops when there are like half-img one-img one-img half-img I want it to be like that and not get back to one one one.
Here the example I mentioned:
https://codepen.io/vilcu/pen/ZQwdGQ
Is that possible to do that?
P.s I tried to insert the snippet here, but I couldn't make slick work in here.
I'm looking for a way to adjust the sensitivity (or threshold) for swiping to the next/prev slide - for example, I'd like to be able to only swipe 2px left or right and release to move to the next/prev slide. Note that I'm not asking for the dragThreshold option, which adjusts when the horizontal swipe kicks in - I want to actually move to the next slide with less effort, such as on Patagonia's mobile site: https://www.patagonia.com/product/mens-pack-in-pullover-hoody/20895.html
test that against https://flickity.metafizzy.co/options.html on mobile to see how much more stubborn flickity is before it swipes.
I can't find any examples of this, is there any way to do it outside of manually tracking drag direction and distance, and manually triggering an advance to the next or prev index? If that's the only way, can you share a code snippet? Thanks!
I use slick js and I want add animation for slide.
How to do to the previous slide moved to the left and another on his pestering faster right?
When you click the arrow previous, I would like to overlap the previous slide quickly from right, and seen moving slowly to the right.
I need a zoom feature inside every slide, so I installed a zoom app (http://www.jacklmoore.com/zoom) in them. But I want to freeze momentarily or disable the swipe when the user is dragging the mouse or touching to see other areas of the image.
The zoom app has functions onZoomIn and onZoomOut that I can add a trigger to an event or anything else, but I could not figure out how to disable the slick carousel.
I know there are many carousels apps, and I would accept suggestions, but I need to use slick, because slick is the only one I tried that didn't change the elements drastically, like stretching or shrinking unless desirable.
So, is there a way disable the dragging on slick?
Ive been fiddling with this for hours and hours and just cant get it right. First off my sites are already using Prototytpe and Scriptaculous, and to change would take a long time.
Basically I am after achieving a slideshow effect similar to jQuery Cycle plugin. I have written most of it but cant get over this hurdle:
I need the user to be able to press a control button which will skip the slide to which ever one they have picked. My problem is that if a fade / appear effect is running, then it causes an overlap.
I am using queues and they are in their own scope. The problem as I see it is that the fade effect on one slide and the appear effect on the next slide are separate functions. Which means that if the user clicks the control button to move to another slide whilst the animation is inbetween fade & appear, then the next cycle will slot itself in the queue between those 2 effects. The default is to append to the end of the existing queue, which should be fine. But if the appear hasnt been added when a new fade is instantiated, then the queue messes up.
I can make it so nothing happens if animation is in effect but thats not the effect I am after. I want to be able to click a slide and whatever is happening to effectively stop and the next slide appear.
This is an example of what I am after: http://www.zendesk.com/
Im sorry if that doesnt make sense. Its a tough one to explain.
If you don't find anything by the lib you can just use the DOM and some JS like in this question: How do you make something to appear slowly on a page using Javascript?
I managed to fix my own problem last night.
I had already tried this but couldn't get it to work right. All I done was added a flag variable which is true if any animation is running (var running = true; [or false])
If the user clicks the pager buttons to move the slide (lets say from slide 1 to slide 4), and if the slide is already in motion (then var running == true), then the code finds all queued effects in the system, deletes them, and then hides all the slides. It then just starts a new cycle to slide 4, as the user requested.
Doesn't matter how fast you click the pager buttons now, it works seamlessly. :)