I am looking for a scroller which auto scrolls to the end and stops and switches to manual navigation. I tried googling, there are thousands of scrollers but I need one with both autoplay and manual scroll functionality. Where user can also switch to manual scroll with a single click while it is auto scrolling, something like this.
But it must stop auto scrolling when it has reached end and then switch to manual scrolling.
jQuery Easy Slider 1.7 (Demo here) has both manual scrolling and automatic scrolling, which automatically turns off as soon as the user clicks on the slider. It's also really easy to customize and extend - and I've done so in a few past projects.
As for the autoscrolling to stop at the last slide, you could manually add the functionality using a timer that turns off autoscrolling after all the slides are done. Or you could play with it and just add an event that gets fired whenever the last slide is reached.
Edit:
Using SmoothDivScroll is even better, because it allows the user (you) to add a number of callbacks. So you can just turn off autosliding when the last slide is reached:
$("#makeMeScrollable").smoothDivScroll({
autoScrollingRightLimitReached: function(eventObj, data) {
$("#makeMeScrollable").smoothDivScroll("option","autoScrollingMode","");
}
});
Edit 2:
Sadly, it seems that callbacks not working are a known issue on their bugtracker. You could try and contact the creator of the script and see whether he's planning on fixing them.
Related
Context
I am creating a site where there are sections stacked in rows, and each row takes up the full viewport.
I don't want the site to be scrollable normally, and would instead like the site to "snap" to the bottom of each section, so that I can then play out the animations taking up the full view port.
Issue
I took the approach of listening to scroll events, and then triggering a nextsection.ScrollIntoView when the user had scrolled far enough to snap to the next view.
This doesn't work well though, as the ScrollIntoView is interupted by user scroll activity, including the latent scrolling of the mouse that hangs around for about 300ms after you've scrolled.
I managed to get it sort of working by using a setTimeout(scrollIntoView(), 400), but this takes too much time and relies on the user not interacting with the site after scrolling.
I made a CodePen (here) showing the type of setup I'm working with, however to see the issue you need to open it as a webpage itself, as CodePen doesn't perform a smooth animation when using ScrollIntoView and just jumps there.
I need a smooth and uninterruptable animation as the site switches from one section to another, but as of yet I've found no working ways to implement this.
Thanks for any answers.
I am after a similar effect to that found here https://waaark.com/works/ - when you scroll down out of the top section, further scrolling actually replaces what is in view and no further scrolling happens. I don't want as complex animations though a simple slide in from the side is what I am after. that site is WordPress, but my site will not be.
I have tried to at least crack the slide in, but a lot of examples I have looked at and tried do not work, or don't work with multiple images - i.e. slide them all at once and don't wait for the scroll, and only slid in the first time you scroll down - want it to work every time you scroll up and down.
You could use Fullpage.js - There are a few examples for different configurations and it is very easy to setup.
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!
Im learning javascript and jquery and im trying to create my own carousel.
The current problem i have stumbled over is the following. When the user stop scrolling in the carousel, i have a function that runs and centers my targeted Carousel item to my desired point. I have illustrated this with a black line in my fiddle. Here is my function that centers that item:
jQuery.fn.CenterToPoint = function(){
return this.each(function(){
Offset = $(this).offset().left;
Width = $(this).width();
Illuminate_Point = 0.45 * $(window).width();
ScrollLeft = Illuminate_Point - (Offset+Width/2);
$Container.animate({scrollLeft: "-=" + ScrollLeft},450);
});
}
However, i want the user to be able to scroll even though the animation is running. How can i kill this animation when its running but the user either clicks, mousescroll or trackpad is used on my carousel?
Here is my jFiddle:
http://jsfiddle.net/ptp05jvo/
From what I understand, your problem are:
The box is twitching after the it reach to desired point (black line).
When animating (box moving towards the black line), user input will cause box to 'jump'. In this case, you would want user input to override animating scrolling.
I didn't solve the whole problem, but here's what I've got so far: http://jsfiddle.net/ptp05jvo/3/
I managed to stop the first problem (twitching) by adding the following option in .animate().
always: function() {
clearTimeout($Container.data('scrollTimeout'));
isSystemScroll = false;
}
When you animate with .animate() to scroll, jQuery scroll the element and it's considered as actually scrolling, so .scroll() event is triggered. This can be good / bad.
In your carousel case, it's sort of bad because you .CenterToPoint() is called within .scroll() event which means it will be called every time jQuery animate the box to center.
This is what causing the twitching problem. The .CenterToPoint() keeps getting called within `.scroll()' event. So, the option I added will stop this.
To separate the concern, I added new jQuery function, scrollStopped to handle scrolling stopped event.
There is also a new variable called isSystemScroll that I introduced to the code. The idea is to recognize whether the scroll is coming from user / animation. With this, we can prioritize user input to override animation scroll.
However, user input can be anything, keyboard arrow, mouse wheel scroll, mouse click on scroll bar, etc. In my example, I only handle keyboard arrow input which is shown in the following code:
$(document).keyup(function () {
isSystemScroll = false;
console.log("key up");
});
Obviously, you can add additional check to only capture left / right arrow keys instead of all keys.
This sort of solve the 2nd problem. But you still need to handle other user inputs, esp mouse moving scroll bar.
From the test, I found that Firefox render the animation better and smoother. In Firefox, user input with keyboard arrow will override animation perfectly. The transition is smooth between the two. However, in Chrome, there's a little bit lag / jump.
Also, in Chrome, horizontal scroll bar doesn't show up while in Firefox, it does.
It's worth to mention that Firefox doesn't show twitching problem. I can't be sure if this is caused by the CSS you have. I didn't modify your CSS.
I came across couple carousel library and did the same test to see how they handle the issue.
Owl Carousel
http://owlgraphic.com/owlcarousel/demos/custom.html
Only allows dragging input. Other user inputs are disabled (scroll bar, keyboard arrow, etc). However, if you try to drag the carousel (in Chrome browser) while it's animating, you will see same jump / lag problem. Again, Firefox shows better and smoother animation with this library.
Slick
http://kenwheeler.github.io/slick/
The 'autoplay' option prevents user input when carousel is animating. No scroll bar and you can only move with keyboard arrow.
Conclusion
As a conclusion from this long answer, few things you can do if you want to build your own carousel:
Limit user input, only allows certain input.
Disable scroll bar.
Or, you can use existing library out there.
I'm using jQuery jCarousel for a slider, after few mins I found the way to stop the slider on mouseover, but the problem is it doesn't stop immediately on mouseover, it only stop at the end of the image set (3 images in my demo). However it does start immediately on mouse out. I'm new javascript stuff and couldn't do much by diving to it's source. :(
My Current Code - http://bit.ly/ijNcow
Thank You
Often, we manage a jCarousel by using .click(). In this case - you can use the following code to stop the animation:
itemLoadCallback: {
onBeforeAnimation: function(jc, state) {
jc.lock();
}
}
The jc.lock() or jc.unlock() functions stop and resume the animation, respectively.
The jCarousel code uses two timers that I can see. The timer wrapped in jQuery's animation support and a timer that scrolls the underlying list forward by one item. Your page's code clears the second timer by calling carousel.stopAuto(), but not the animation timer. Hence the animation continues until the next item has been scrolled in (in essence, that the second item reaches the topmost position).
To clear that one you'll have to also call jQuery's stop() function on the carousel element. At a guess (no, I have not tested this), you should call
$('#listing').stop(true);
Having said that, I'm not sure what will happen to the user experience if you've paused half way through an animation and then started it up again (by moving the mouse out, say). The animation won't start up where you left off, that's for sure. I would also guess that the carousel will assume that the animation completed normally and you'll get a "jump effect" as it sets the top item properly in place.