Bidirectional touch swipe slider for both horizontal and vertical - javascript

There are many JavaScript or CSS touch swipe sliders out there but all of them seem to only allow either vertical or horizontal swipe of a slide. Is there anything out there that allows both on one slide, so I can swipe horizontally and vertically on one slide?

I'm not 100% sure if this is what you are looking for, but it looks darn close:
iDangero.us Swiper.
http://www.idangero.us/sliders/swiper/
Allows vertical swping boxes within another horizontal carousel/slider. I've been looking for the same thing for awhile, and this is the closest plugin I've found to what I'm looking for. A little hacking/manipulation could probably make it do what you're looking for.

Here is an Easy Way of clreating horizontal and vertical slider
<script>
function MM_effectSlide1(targetElement, duration, to, from, slide, toggle)
{
Spry.Effect.DoSlide(targetElement, {duration: duration, to: to, from: from, horizontal: true, toggle: true});
}
function MM_effectSlide2(targetElement, duration, to, from, slide, toggle)
{
Spry.Effect.DoSlide(targetElement, {duration: duration, to: to, from: from, horizontal: false, toggle: true});
}
</script>
<body>
<div id="socialmedia" class="socialcontainer" onclick="MM_effectSlide1('socialmedia', 1000, '100%', '11%', true, true)"></div>
If you look at the Code the only code that should be changed is the MM_effectSlide1, 2, 3, and so forth

You can use fullPage.js to have swipes exactly as you describe, as shown on this demo page.
The only issue I have with fullPage.js is the lack of 1:1 touch movement. So instead of the swipe being controlled as long as you have your finger on the screen, the script has a configurable variable that says once a threshold swipe of X percent of the screen height/width has been met. This works, but doesn't feel nearly as nice as something like RoyalSlider which does have 1:1 touch movement; so if you swipe only 49% of the way you remain on the same section. That said fullPage.js has great support (IE8+) and is updated regularly.
Ideally I'd like fullPage.js to have 1:1 touch movement, the author is open to pull requests but for now my knowledge of javascript is too basic to implement something like this.
An option I am considering at the moment is using two sliders in combination with each other. I am going to use RoyalSlider for the left and right swipes (so you get the nice 1:1 touch) and fullPage.js for the vertical up down effect.

Related

Transform element based on scroll position without using scroll events (Css only if possible)

I currently have a full screen hero image slideshow on the homepage of a site. I have an javascript effect which gets the scroll position and divides it by 1.5 then sets the image transformY position causing a parallex effect.
Here is the code I currently have:
$(window).on("load scroll resize", function () {
$("form:not(.blive_PageEdit) .hero-img .blive_Control img").css({ "margin-top": $(window).scrollTop() / 1.5 });
});
This works as I want, but I have noticed that performance is a major issue expecially on browsers which support asynchronous scrolling which causes a juddering effect.
What I want to know is if there is a better way to implement this? What would be perfect would be to have something like the following but I don't think this is possible with just CSS:
img {
transformY(calc(scrollTop / 1.5));
}
I have also looked at IntersectionObserver, but I am unsure this would achieve what I want to do.
Any thoughts would be helpful. Thanks

Disable touch swipe on fullpage.js

I'm using the fullpage.js plugin for a single page marketing site.
I'm using navigation links to jump to scenes (all horizontal) around the site so I want to disable to the touch/swipe (between scenes) feature as it interferes with other touch elements.
I've been though all the documentation but I can't find out how to achieve this.
Any help is welcome. Thanks, Jack.
Just use the option autoScrolling:false when initializing the plugin. This way the mouse wheel won't swipe and neither the touch events will.
If you want to keep the mouse wheel scrolling (for computers) but disable the touch events (touch devices), then I would recommend you to initialize the plugin in a different way for touch devices.
In order to do so, I recommend you to do something like this.
Update 2016:
You can use the options responsiveWidth or responsiveHeight as well as the class fp-auto-height-responsive.
The options will disable the autoScrolling feature for mobile devices under the specified dimensions. Examples available in the examples folder of fullPage.js or online.
You can also use responsiveSlides and force the transformation of horizontal slides into vertical sections on responsive. This can be done through the Responsive Slides extension.
Update Sep-2014:
A method named $.fn.fullpage.setAllowScrolling can also be used with this same purpose. It will disable both the touch scrolling and the mouse scrolling.
Update Jun-2014:
autoScrolling:false only disables the vertical scrolling.
If you want also to disable the horizontal one, there's no way to do it right now. You would need to modify a bit the plugin.
Inside fullpage.js replaces this:
function removeTouchHandler() {
if (isTablet) {
$(document).off('touchstart MSPointerDown');
$(document).off('touchmove MSPointerMove');
}
}
For this:
$.fn.fullpage.removeTouchHandler = function (){
if (isTablet) {
$(document).off('touchstart MSPointerDown');
$(document).off('touchmove MSPointerMove');
}
};
And then, when you initialize the plugin, call that public function in the afterRender callback like so:
$(document).ready(function() {
$('#fullpage').fullpage({
afterRender: function(){
$.fn.fullpage.removeTouchHandler();
}
});
});
Don't call fullpage twice. Just add the afterRender function inside your initialization.
The setAllowScrolling function also accepts a second argument for directions so the following can be used to disable left/right scrolling/swiping:
$.fn.fullpage.setAllowScrolling(false, 'left, right');
As of June 2017, none of the previous methods worked for me. The simplest way I found to effectively disable touch is as follows.
In jquery.fullPage.js you will find the function setAllowScrolling
function setAllowScrolling(value, directions){
if(typeof directions !== 'undefined'){
directions = directions.replace(/ /g,'').split(',');
$.each(directions, function (index, direction){
setIsScrollAllowed(value, direction, 'm');
});
}
else if(value){
setMouseWheelScrolling(true);
addTouchHandler();
}else{
setMouseWheelScrolling(false);
removeTouchHandler();
}
}
When fullpage is initialized it automatically calls setAllowScrolling(true), triggering the else if(value) condition above. Simply comment out the call to addTouchHandler() to fully disable it, or add some sort of condition for it to be called, eg
var winw = $(window).width();
if (winw > 480){
addTouchHandler();
}
With this method the left and right arrows still work when tapped, so horizontal slides can still be navigated. It should be noted that using $.fn.fullpage.setAllowScrolling(false, 'left, right'); will also disable the arrows.

how to slow down Flowslider slider?

I have a flowslider slider, here the page of the project http://www.flowslider.com/
It's a very easy to use slider however I don't know how to reduce the sliding speed, there's no working example in the site
that's my slider initialization code:
<script>
jQuery(document).ready(function($) {
// Select your slider element and call Flow Slider plugin.
var $slider = $("#slider");
$slider.FlowSlider({
controllerOptions: [{
mouseStart:100,
mouseEnd:100,
}],
marginStart:20,
marginEnd:20,
mode:"horizontal"
});
});
</script>
the actual slider is just a
<div id="slider">
a bunch of PHP generated divs here, each one is a slider element
</div>
I tried setting speed and coefficient but without any results
You can't change the sliding speed, it's because the sliding speed depends on user mouse action ( user mouse movement) and the width of content div and the count of images in it. It means when you move your mouse slowly cross the slides the sliding happens slow and when you do it fast slides goe fast. This slide is not that kind of slides that repeats sliding in a period of time.
As written in the documentation of HoverCenter you can use the coefficient or write your own moveFunction. It seems that a list for controllerOptions is missing in the documentation.
To get coefficient to work, use something like:
$('#flowslider').FlowSlider({
mode: 'horizontal',
marginStart: 0,
marginEnd: 0,
controllers: ['HoverCenter'],
controllerOptions: [{
coefficient: 0.1
}]
});

carousel trigger when continuous scrolling not working

The carousel (caroufredsel) scroll (check this for example) continously to the left. When I hover to an arrow to the right it will stop scrolling then it will reverse it's direction. I tried using custom events but it appears that it's not working. Here's a code of the carousel.
$('#gallery').carouFredSel({
width: "variable",
auto: {
items : 4,
duration :"40000",
easing :"linear",
timeoutDuration :0,
pauseOnHover :"immediate"
},
items: {
visible: 3
}
});
Now my custom event that will cause the carousel to reverse is direction is like this. But it's not working until the whole items where finished scrolling. What I want to achieve is to instantaneously reverse the direction when hovering.
$('a.prev').hover(function()
{
$('#gallery').trigger("pause");
$('#gallery').trigger("configuration",["direction",right]);
$('#gallery').trigger("play");
}
The code above doesn't work and I've tried different events that will simulate the reversal of scrolling but had no luck with it.
If there's no workaround for this. I'm willing to change another plugin that will easily do the work. If you know something that can do it easily please leave your suggestions. Thank you very much!
That totally depends how the carousel is implemented. A possible solution might be to stop the eventPropagation. It may or may not work depending on the implementation of the carousel.
$('a.prev').hover(function(event)
{
event.stopPropagation();
$('#gallery').trigger("pause");
$('#gallery').trigger("configuration",["direction",right]);
$('#gallery').trigger("play");
}

Parallax 'background-image/position/attachment' jQuery animation is jittery

Here's the breakdown...
wrapper (position:relative; overflow:hidden; )
section-container (position:absolute)
multiple child sections
I attach a mousewheel event listener and animate (with easing) the 'top' position of 'section-container'. As this position changes, the 'background-position' of each section moves vertically based on the position of 'section-container's 'top' property (continually updated through a setTimeout()).
All of that works as it should, except as the 'background-position' changes, the image has a bit of a jitter. This doesn't happen if the 'background-attachment' is set to 'fixed'... but I don't want that.
Can anyone explain this, with a possible fix? I continually refer to the https://victoriabeckham.landrover.com/ site and can't figure out what they're doing differently to get theirs operating so efficiently.
You can check this out, i believe its where they do most of the animating:
https://victoriabeckham.landrover.com/js/ScrollAnimator.js?v=471
I would have to say they have some kind of framework that they are using to accomplish this.
EDIT: Sorry didn't see the new answer above mine, seems like a good starting point.
-Ken
If you inspect this website carefully, you will able to use it like landrover site.
You need to use: scrollTo plugin and parallax plugin
And document jQuery should be like this:
$(document).ready(function(){
$('#nav').localScroll(800);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#intro').parallax("50%", 0.1);
$('#second').parallax("50%", 0.1);
$('.bg').parallax("50%", 0.4);
$('#third').parallax("50%", 0.3);
});
Ok. So I figured out my issue was when trying to animate() the 'section-container' on the 'top' property. I was using a "+=" to allow it to increment from its current position. Not a good idea when using 'mousewheel' events. I changed it to a hard-set variable that is continually incremented/decremented.

Categories

Resources