I was wondering if it was at all possible to create a slider which had checkboxes and showed the next slide depending on which check box was ticked.
For example:
Generic Question
Yes No
If you click Yes then you move onto the next question. If you click No then you get taken to a different slide.
I think there is no slider that providing the same option. But We can develop such sliders using Jquery OR Javascript
Or We can customize an existing slider.
Related
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!
I acquired the theme infusion from the internet. You can see examples of it here http://www.html5xcss3.com/2014/06/infusion-responsive-html5-theme.html
or a live preview here http://peterfinlan.com/infusion/
.. I am having problems making the paginator class move. Obviously when one of those elements is clicked it is supposed to move and show the rest of the team.
I realize the code on that theme just displays the 3 pages using that class and that no actual motion is available.
I want to know what needs to be done for that area to move in either direction when one of those elements are clicked.
Thanks!
You're looking for a slider or carousel in javascript or css - some options are here:
http://kenwheeler.github.io/slick/
http://owlgraphic.com/owlcarousel/
http://flexslider.woothemes.com/basic-carousel.html
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. !
I'm currently taking a web development class and looking to go beyond the "scope" of the class. I managed to create a jquery slide show in a div, now id like to show case some other features in two other divs, stack them into a single div and and call them via a set of toggles. Any methods or roads that can be suggested?
By stacked I mean three divs, one on top of the other. One of these divs is a jquery slider. I'd like a toggle to show one and hide the other two. I'll try and post code after I make it home from work.
Not sure what you mean by "stack", but jQuery Accordion might be a simple solution to get what you're looking for.
It also has methods that you could call from other ~buttons~ to trigger to show/hide effect.
You could even make the three divs into a slide show that is triggered by clicking some navigation like forward and back arrows. Look into the Anything Slider.
I am trying to create iPhone style folders in HTML using CSS with very little JavaScript if possible. You can find the screenshot here. http://getandroidstuff.com/simi-folder-android-widget-download-iphone-style-folder/ Screenshot on that page shows 4 folders, System, Apps, Toolbox, and Dev. Clicking on Apps shows a slide out menu with apps. Is the same achievable with many folders? For example, say I have 10 divs floated left so that 4 fit in a row, giving me total of 3 rows. If a user clicks on the 2nd div, another div slides out pushes the 2nd and 3rd row down, creating a total of 4 rows?
Here is some code, I was playing with: http://jsfiddle.net/uAtak/.
Yes, it is doable. Unlike the example you referred, I would toggle between display :none and :block with animation when user clicks an icon. It will automatically push the other icons.
You mean like this?
http://jsfiddle.net/uAtak/5/
Only clicking on div 'One' works for this example, but as you can see it's pretty easy to extend.