Nested slider for horizontal AND vertical movement together? - javascript

I want to understand if there's a jQuery or JavaScript package out there that allows both horizontal and vertical sliding of images/data at the same time in one nested slider?
I'm having trouble finding a package that allows this to work effectively.
It needs to have buttons to go up, down, left and right as well as the ability to slide using finger gesture when used with touch screen (optional). Also, when on slide 1c for example, when next is selected to go to slide 2a not 2c. Any help or advice would be gratefully received.

check out ankkit.com. its a portfolio of a friend of mine. he has done what you want

Have you tried iDangerous Swiper Plugin? I think this is what you are looking for.

Related

How do I make this vertical carousel with touch and scroll support?

I need to build a vertical carousel like the one in the image, where I'm able to scroll and use touch.
When the active slide is clicked, the user is redirected else it scrolls to to the element.
Any tips for libraries that can help me achieve this?
Thanks in advance!
I ended up making the carousel myself following this tutorial:
How to build a carousel from scratch in vanilla js
It uses CSS3 animations to move the elements and javascript to swap classes to trigger the animations.

javascript masonry divs are resised with ccs and are overlapping each other, how can I get them to move out of the way?

But the key thing is I want them to do it in that tidy animated way, how do I get it to responsively move?
also what do I serch when I want an animation for when they appear, prefeerably a callback for their appearance so I can control that animation wuth transitions.
Lastly if I was to flick through a huge list of them on a phone how would I get the page to detect a fast flick to scroll down? Im creating an app for children between 3 and 6 for a uni project and when its flicked fast I want it to go "WHEEEEEEEEEEEEEE"
Any ideas as to how do able that is?
appreciate your time, thanks.

Constant scrolling image

I am after some functionality of part of a development site I am working on.
What I want to achieve is a set of 14 images, aligned horizontally, that constantly scroll horizontally so that they are showing 7 images at a time, and pause when you hover over the slider.
I tried using jQuery Cycle to try and get this functionality but I couldn't get the right parameters included.
Any help would be greatly appreciated.
Try this script. I have not used it but it seems to be what you are looking out for.
http://logicbox.net/jquery/simplyscroll/

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. !

jQuery - Continuously scroll div on hover

I wish to build a shelf of content much like on Netflix where when you hover over arrows on either end the shelf scrolls at a continuous speed. Ideally, I would also like to make it so when you click the arrows it scrolls a chunk along, so you have the option to click like made to get through a shelf quickly.
This will be using lazy loading so you don't need to worry about repeating content, but obviously it won't have a set width (other then the outside container being 100% with overflow scroll.
Also, this needs to be actually scrollable, so it will work on tablets/phones.
I have no idea here to start so any directions would be great.
Thanks,
Jake!
Image of netflix shelf.
UPDATE: Check out the Smooth Div Scroll jQuery plugin. It slides continuously through the image, you can hover the mouse on the div and manually scroll back- and forward.
Original answer:
I might be off with that, but check out these two plugins:
jQuery Coverflow plugin or the jQuery Imageflow plugin
I think the keyword you are looking for is "flow" and there are multiple flow plugins for jQuery. Hope this helps.
Best regards,
Michael

Categories