How can I create a 1 to 1 Swipe Carousel in jQuery - javascript

I am trying to custom build a 1 to 1 movement jQuery carousel. I would like for it to work just like SwipeJS does where the carousel moves as you slide your finger.
Unfortunately I can't use the wonderful SwipeJS as this project requires some deep customization of the carousel that SwipeJS wont allow.
I was just wondering if someone could point me in the right direction of how to get started with a iOS carousel that moves as your finger moves on the screen (in jQuery).
UPDATE: This was my attempt http://jsfiddle.net/atlchris/cTt6c/ but it is not working as I had hoped.
UPDATE 2: I think I am getting closer: http://jsfiddle.net/atlchris/cTt6c/1/ This works better.

I think I have it figured out: http://jsfiddle.net/atlchris/cTt6c/2/
1 to 1 movement via jQuery!

Related

Multi Item Bootstrap 4 Carousel is not showing clean transition

I probably need a step in the right direction as I'm not sure if this is a CSS transition issue or a Jquery issue.
I'm trying to implement the carousel listed here:
https://www.codeply.com/go/XPajZsz60p/bootstrap-4-responsive-carousel-4-slides-slide-one
But when I tried to implement it (see half way down the page under Recent Clients) and try to slide right, it does not have a smooth transition. The slide left works perfectly.
http://www.fordengineering.ca
When I slide right, the new icon appears almost immediately and covers over the whole slide.
Is this because I should be doing this on the bs.slid.carousel function instead of the bs.slide.carousel function in JQuery? Or is this because of a CSS issue?

FullPage.js not scrolling to top

I'm working on this site http://www.lodahl.aero/ which is using fullpage.js for the front page. Although it was working fine at one point, it's stopped now and (I'm sure its something silly) but i cannot figure out why. Basically you cannot scroll up or down with the mouse wheel or pageup/pagedown keys to or from the first slide. You can flip between the 2nd and 3rd slide fine, but the 1st one is not playing ball. Can anyone elighten me as to what I'm missing?
Thank you

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

Nested slider for horizontal AND vertical movement together?

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.

Flexslider change finger swipe angle

I am using flexslider and Joomla to make a mobile swipe responsive CMS site, however the swipe angle required to change from slide to slide is too sensitive. More often than not vertical swiping through the content will activate a horizontal slide. Anyone worked with this and/or have any clue where in the js script i can change the limits of horizontal swiping? Thanks in advance!!
I recently encountered the same problem and was able to resolve it with this fix:
https://github.com/wearebully/JS-Snippets/tree/master/Flexslider%20Touch%20Sensitivity%20Fix
Hope it helps.

Categories