Is there a way to let users scroll free inside a slick slider without jumping back to an element?
At the moment I can only scroll from one slider item to the next. I want to allow scrolling like in a browser with the mouse or by dragging the elements.
I found the option swipeToSlide which allows users to drag or swipe directly to a slide irrespective of slidesToScroll.
That's nice but not a free scrolling with the mouse.
Is there any solution to to that?
Here's my current slick code:
$('.multiple-items').slick({
infinite: true,
swipeToSlide: true,
slidesToShow: 3,
slidesToScroll: 3
});
Working example
I found myself in this question as i'm trying to achieve the exact same functionality as the one you describe.
I found a way to enable mouse wheell scrolling but NOT free scrolling. So when you rotate your mouse wheel up it goes to the next slide and when you rotate your mouse wheel down it goes to the previous slide.
The code for this functionality is the following:
$('.multiple-items').on('wheel', (function(e) {
e.preventDefault();
if (e.originalEvent.deltaY < 0) {
$(this).slick('slickPrev');
}else {
$(this).slick('slickNext');
}
}));
Have you managed to achieve the free scrolling?
Related
I'm working on a slideshow area. I want to make it so scrolling horizontally will trigger an animation which moves the scrollable area to the next "slide."
Everything is working, but only if I scroll just a tiny bit. If I scroll more, the GSAP scrolling animation fails silently.
There are two ways that would make sense for this to be solved which I can think of:
1 > The first would be cancelling the scroll behavior, something like this:
$viewing_area.scroll( function(event) {
if(animationIsInProgress) {
event.preventDefault();
}
}
But this way is likely to stop GSAP scrolling as well. There is no way to distinguish if the scrolling is due to GSAP or the user that I know of.
2 > The second way would be to have GSAP force it's scrolling over anything the user is doing:
TweenLite.to($viewing_area, time, {
scrollTo: { x: slide_stops[nextTarget] },
ease: Power4.easeInOut,
onComplete: function() {
console.log('scrolling completed');
animationIsInProgress = false;
}
//Some option for forcing the behavior over user scrolling
});
Are either of these things achievable, or is scrolling by it's nature, unstoppable?
It ends up, GSAP scroll to plugin has a setting for this:
http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/
It is called autokill, and if it is set to false, user scrolling will not interrupt the tween.
TweenLite.to(myDiv, 2, {scrollTo:{y:400, autoKill:false}, ease:Power2.easeOut});
EDIT: Revolution Slider recently updated to Version 5 which by default supports mouse scrolling between slides without the need for additional javascript by the user and I've found it to work flawlessly.
Original Question:
I'm using a full screen Revolution Slider and by using the code found on the developers site I've managed to get the slides to advance using a mousewheel scroll.
The problem is that the slider is advancing more than one slide at a time depending on how much the user scrolls. I need the slide to only scroll once per mousewheel event. I tried using the solution found here but couldn't get it to work: Removing event after one scroll
I'm very new to Javascript so any help is much appreciated.
Here is the code I am currently using
(function() {
var slider = revapi1;
slider.parent().on('mousewheel DOMMouseScroll', function(event) {
if(event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
slider.revprev();
}
else {
slider.revnext();
}
});
})()
revprev() and revnext() is where moves happen.
Deeper you should find something like speed, steps_length...
Just starting to use fullPage.js and loving it so far.
Anyhow, when implementing continuous and looping effect and you're on the first section, it allows the end-user to scroll up and land on the last section as well ... which is a problem when trying to tell a story to the user. Therefore I am just trying to disable the up scrolling, but have no idea how to do so.
I did some research and came across the moveSectionUp and tried disabling it but had not figure out how to. Can anyone familiar with fullPage.js help me out here?
Note: I am only hoping to disable it for the first section and the rest is free to scroll back and forth.
Thanks in advance.
Use the fullpage.js function setAllowScrolling with the parameter up like so:
//disabling scrolling up
$.fn.fullpage.setAllowScrolling(false, 'up');
You can use it on the afterRender callback and the afterLoad to play with it, like this:
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
continuousVertical: true,
afterRender: function () {
//disabling scrolling up on page load if we are in the 1st section
if($('.fp-section.active').index('.fp-section') === 0){
$.fn.fullpage.setAllowScrolling(false, 'up');
}
},
afterLoad: function (anchorLink, index) {
if (index !== 1) {
//activating the scrolling up for any other section
$.fn.fullpage.setAllowScrolling(true, 'up');
} else {
//disabling the scrolling up when reaching 1st section
$.fn.fullpage.setAllowScrolling(false, 'up');
}
}
});
Demo online
This way the visitors won't be able to scroll up on page load.
From the docs:
setAllowScrolling(boolean, [directions])
Adds or remove the possibility of scrolling through sections by using
the mouse wheel/trackpad or touch gestures (which is active by
default).
directions: (optional parameter) Admitted values: all, up, down, left,
right or a combination of them separated by commas like down, right.
It defines the direction for which the scrolling will be enabled or
disabled.
I use carousel bootstrap 3 to use slide text. When the row#1 text is long to bottom (ex: height 300px) and the row#2 text is too short (ex:just 10px), The problem is we always must scroll to top as manually when we click next to row#2 from row#1. How to make when next slide, the system will 'smooth scrolling' to top as automatically???
In other hand, How to user can use 'hand carousel' ??? (I don't know the technology name but user just tap to right on mobile when want to next slide) when use mobile so its easy next slide without go to bottom again (find the carousel again) (this issue important when mobile ).
This is simple code
$(document).ready(function() {
$('#carousel-example-generic').carousel({
interval: false
})
});
But full code in fiddle: http://jsfiddle.net/luisan/B9FeP/1/
Thanks
You could tap into the carousels slide event and then add the jquery scroll top function
$('#carousel-example-generic').bind('slid', function () {
console.log('slid event');
$('.carousel-inner').scrollTop(0);
});
Maybe using body would be better
$('body').scrollTop(0);
You can also add in an animation that would look nicer
$('body').animate({ scrollTop: 0 }, 600);
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");
}