Check condition before changing slide in Slick Slider - javascript

I am using this popular carousel (http://kenwheeler.github.io/slick/).
I have placed certain elements inside each slide. At least one of these elements must be selected by the user before moving to the next slide. But I cannot figure out how to prevent the user from manually moving to next slide by clicking the 'next' arrow before selecting an element.
I know that 'next/previous' arrows can be disabled but I do not want to do that as the user might want to go back to previous slide to change his option.
I know that one option is to disable default arrows and introduce my own prev/next arrows and then bind slide changing functionality to it along with condition checking. But it would be great if there is some built-in option in this slider (which I am not able to figure out) as it would minimize my effort.

I made a quick modified version of Slick that allows for condition checking when going next, see: http://jsfiddle.net/alan0xd7/dhxhv5gg/
Basically the slider will only go to next if fnCanGoNext returns true.
I've only actually added one line around line #700 on the fiddle. It doesn't handle things like clicking on "previous" when on first slide, but you can probably work from here.
Since Slick is an open source project, don't be afraid to change the code and adapt it to suit your needs. It is fun to see how things work behind the scenes.
Hope this helps!

Related

How to make a slick slider stops exactly where the touch leaves the screen?

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.

About fullPage.js

I'm working with fullPage.js, an amazing scrolling framework.
I need to have the site working like this:
As you can see in the .jpg when the site loads and people click or scroll to the right using the slideshow, there are 4 slides there, when they catch the last one users can only go down. No other behavior is allow.
Now I have this working just for the horizontal line, in the following way:
People can not go back because there is no previous button.
When people get to the last horizontal slide the next button navigation disappear.
Now I need to create another section down and I need that one just works on the last slide numbered as 4 in the jpg. Not allow to pass there in the slide 1, 2 or 3.
Any ideas? How can I do that?
You could disallow the vertical scrolling until the user reach the last slide.
You could use the functions setAllowScrolling and setKeyboardScrolling provided by the plugin together with a callback such as 'afterSlideLoad'.
Thank you so much for reply. I found a solution changing the framework and working with Parallaxjs.
http://stolksdorf.github.io/Parallaxjs/
Very versatile for this purpose. !

Logic for Switching a Div

I've got a question. I've been working on this site for a while, and I've hit a bit of a brick wall. I've thought this over a few times and I'm not sure how to go about this.
I've got 5 different configurations for content on a page, and I need to swap between them. What's supposed to happen, is when the user clicks on a button, a series of animations is supposed to happen, and ultimately replace the button and the top with the one that was pressed. The one that was at the top should return to its original position ("Home" should always be on top, "About" should always be just beneath that, save for when it's the current page).
My site is here, http://www.logicanddesign.ca, and all the javascript is open for you to see. Any help you guys could provide would really help. I'd like to do this without completely rewriting my site, but if it's the only way, I will.
Well, the first thing I'd like to point out is that you're associating the button_click function with the images instead of the divs containing them. You would be better off using the div tags for event handling.
Secondly, you only move the current button and the pressed button. To achieve the affect you're going for, you need to move the buttons in-between the default positions of buttonPressed and currentPage.
Moreover, you can't just statically define moveUp function for the button pressed and nothing else. Because sometimes you'll need to move the buttons between the button pressed and current button upwards.
As is apparant, you need to account for in-between moves when you set divs to animate. Possibly in the moveDivs function.
I made a fiddle representing what changes you could do to achive required effect, but I feel what I have written is a mess. The sort of mess which is worthy of nightmares, really...
In my opinion, you could create a javascript class to handle animations and movements. Making a class will make code much cleaner and you could indefinitely add buttons without breaking your code.

jQuery fade li element and cycle it when mouse hovered

I'm trying to recreate an effect in jQuery, where an element (<li> <img>) will be cycled and has a fading effect when hovered. The '<li>' contains '<img>' (image screenshots). When the mouse is on top of element it will keep cycling all that are in '<ul>' with a fading effect. When the mouse is away it will stop cycling the list. I also want to add a pager where you can navigate to the list.
My Existing Code:
link text
My Problem: the current code has some problem with the pagination, it added all images that can be seen on the code. Instead of 1-8 only, it continued to add another 1-8 and another.
Second problem is, It also start cycling and fading when the page loads. The cycling and fading should only be working when the mouse is on top of the element.
I don't know if the 'Cycle Plugin' (Plugin Home Page) is really required on this approach, I wan't it to be minimal as much as possible. I just use 'Cycle Plugin' because it's a quick answer to my problem.
Thanks and merry xmas!
Edits
remove and added a link
I could be wrong, I'm not familiar with this plugin, but it seems like you need an ID for each slideshow you have instead of using a class like you are.
I've setup a JSFiddle with your code and tweaked it. Below is how each slide should function.
starts on mouse over and stop on mouse out
changes on mouseover of the nav
changes when the nav is clicked
The link I gave you in the comments to your question should guide you to the available options for this plug-in. In case you missed it, here it is: plugin options

How can I run an appear effect and a fade effect in scriptaculous? I need them to run in tandam so that no other effect can slot inbetween

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. :)

Categories