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...
Related
I'm working with a Squarespace theme and ran into a little bit of an experience I was hoping y'all may be able to help me fix.
The page has a series of images that scroll horizontally. By default, scrolling does nothing. The below code was provided on the forums to make the scroll control the images by clicking the left or right arrows.
I was wondering what the best and most efficient way to add a simple "cooldown" effect to the function so that there is full delay before the next scroll.
Currently, the scroll just cycles through 3 or four and is very sensitive. I feel that would annoy users.
Thank you in adv for any help. Here's the page in question: http://nicpadula.com/brand-design
<script>
$(function() {
$("body").mousewheel(function(event, deltaY) {
if (deltaY > 0){
$(document).ready(function()
{
$("div.arrow-wrapper.left").click();
});
}
else if (deltaY < 0){
$(document).ready(function()
{
$("div.arrow-wrapper.right").click();
});
}
});
});
</script>
I lost a few days trying to make top position in view on other slide than active slide. I use plugin: idangero.us/swiper/. However, didn't work when I join above plugin with malihu.plugin and I dont know what I'm doing wrong.. PLEASE help me, anbody...
If I use only idangero.plugin then everythink work: fiddle but after join next plugin scrollbar no working scroll to top on (other than active) slides.
How I can join both plugin?
In malihu plugi part of code responsible for srolling:
_wrapperScroll=function(){
var $this=$(this),d=$this.data(pluginPfx),
namespace=pluginPfx+"_"+d.idx,
wrapper=$("#mCSB_"+d.idx+"_container").parent();
wrapper.bind("scroll."+namespace,function(e){
if(wrapper.scrollTop()!==0 || wrapper.scrollLeft()!==0){
$(".mCSB_"+d.idx+"_scrollbar").css("visibility","hidden"); /* hide scrollbar(s) */
}
});
},
In dev show code in browser (ff) I can see:
mCSB_scrollTools mCSB_3_scrollbar (...) mCSB_scrollTools_vertical
Where:
mCSB_X_scrollbar
is propably equal X malihu scrollbar in X slide.
X is number of slide and scrollbar
So what should I edit/do to make it work and where paste it in idangero plugin
I realy need to your help with that...
best regards
Since you're using custom scrollbar on the slides, you need to use the script's API to control it. The mCustomScrollbar plugin defines a scrollTo method, which is available on the element you attached the scrollbar to.
If you want to reset scrollbar position on all slides in the slider except current slide, inside the onSlideChangeEnd callback call
$(hook.slides).not(':eq(' + hook.activeIndex + ')').mCustomScrollbar('scrollTo', 0);
I have a normal scroll section at the top of the page which has some parallax effects and below it there are more standard animated fullPage.js sections.
It works really great but the problem I have is when I do a fast scrolling from top of the page. It skips second section and maybe the third, depending how fast mouse wheel is fired.
It's very bad user experience especially when using Apple's magic mouse, but issue occurs with any type of mouse.
I guess the problem is because of normal scroll section at the top, but I don't know how to solve it. Does anybody has the idea on how this could be solved?
Here is the link: http://2016.macleo.de
P.S. I have also added an onLeave callback with scrollTop animation triggering manually but still buggy. I can see third section a little when trying to scroll fast through site, like some users would probably do.
onLeave: function(index, nextIndex, direction) {
var leavingSection = $(this);
//after leaving section 1
if(index == 1 && nextIndex == 2 && direction =='down') {
$("html,body").stop().animate({scrollTop:$(window).height()});
}
}
Thanks a ton!
I want to achieve a specific behaviour with this awesome JS slider (Swiper) using its complete API, but I am out of luck until the moment... Need some help with this:
Current situation:
Only one slide at the beginning.
What I want each time I click a button is:
The dynamic creation of a new slide BEFORE the first one in each case --> Easy thing, with the prepend() method of Swiper API :)
But (and here is the problem) I want the final users to have the sensation of being just loading the preceding slide, i.e., clicking the button and seeing the swipe transition towards left...
I want this "rare" behaviour because my slider has to show several hundreds of slides, and loading all of them at a time from the beginning results in an extremely slow page load since it has to download hundreds of images...
Thanks in advance.
I finally got it working, like this:
Once the button (with class="prev") is clicked:
$(document).on('click', '.prev', function() {
// If it is the first slide...
if (mySwiper.activeIndex == 0) {
// Slide content
var slide = '<p>New slide</p>';
// Creation of the slide (it instantly moves to index 0 --> the new slide)
mySwiper.prependSlide(slide);
// And then instant (speed = 0) swipe to slide with index 1
// (the one we were watching before creating the new...)
mySwiper.swipeTo(1, 0, false);
// Finally, we implement the visual transition to new slide (index 0)
mySwiper.swipePrev();
}
});
I hope it helps somebody.
Thanks.
Ok so the effect I am trying to emulate can be found on the nexus 5 site - http://www.google.com/nexus/5/ - when you scroll to the phone section. I've viewed source and looked through the code but there is over 13k lines of js so it was a waste.
Anyways what I did was add a class to fix the position of the images and created a background div that was like 5000px so it would appear to be fixed. The js fixed the position after the screen reached a certain point and then removed the fixed class after the end of the div.
My question is that i know this can be done better than my janky 'hack'. I'd love to hear your thoughts on better implementation.
This is part of the code that adds the fixed class
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".container").addClass("fixed");
}
if (scroll >= 8000) {
$(".container").removeClass("fixed");
}
});
Try this guide:
http://blog.teamtreehouse.com/multiplane-design-with-svgs-and-css-3d-transforms
Demo: http://codepen.io/nickpettit/full/eBCrK
Haven't done something like this before myself however. Also just a note that fixed position elements from my experience act up when viewed on tablet/smartphone.